Another quick post on how to use SignalR with Angular.
In short – just put SignalR js code inside the controller function, and it works, with a few catches.
Basic hub:
public class AdminHub : Hub
{
public void Send(string text)
{
this.Clients.receive("You have sent this -> " + text);
}
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.8.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.signalR-0.5.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/angular.js")" type="text/javascript"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
</head>
<body>
<div id="content" ng-controller="SignalController">
<input type="text" id="txt" placeholder="enter your text here" ng-model="txt" />
<input type="button" id="btn" value="push" ng-click="send()" /><br />
<br />
Received: <span>{{txt2}}</span>
</div>
<script type="text/javascript">
$(function () {
angular.bootstrap(document, []);
});
function SignalController($scope) {
var adminHub = $.connection.adminHub;
$.connection.hub.start();
$scope.send = function () {
adminHub.send($scope.txt.toString());
}
adminHub.receive = function (data) {
$scope.$apply($scope.txt2 = "'" + data + "'");
}
}
</script>
</body>
</html>
Two things to watch for:
The angular’s model is being updated from outside of angular context, so we need to call $apply function.
Hub returns a string, and when assigning the property in $scope – make sure the value is wrapped in quotes.