angular-signalr
Bower Component for using AngularJS with SignalR.NET.
Install
bower install angular-signalr
or download the zip.- Make sure the SignalR.NET client lib is loaded.
- Include the
jquery.signalR.min.js
script provided by this component into your app. - Add
roy.signalr-hub
as a module dependency to your app.
Usage
This module exposes a hubFactory
, which is an API for instantiating
signalr-hubs that are integrated with Angular's digest cycle.
Making a Hub Instance
// in the top-level module of the app
angular.module('myApp', [
'roy.signalr-hub',
'myApp.MyCtrl'
]).
factory('myHub', function (hubFactory) {
return hubFactory('yourHubName');
});
With that, you can inject your myHub
service into controllers and
other serivices within your application!
API
For the most part, this component works exactly like you would expect. The only API
addition is hub.forward
, which makes it easier to add/remove listener in a way that
works with AngularJS's scope
hub.on
Takes an event name and callback. Works just like the method of the same name from SignalR.NET.
hub.off
Takes an event name and callback. Works just like the method of the same name from SignalR.NET.
hub.invoke
Sends a message to the server. Works just like the method of the same name from SignalR.NET.
hub.forward
hub.forward
allows you to forward the events received by SignalR.NET's hub to
AngularJS's event system. You can then listen to the event with $scope.on
. By default,
hub-forwarded events are namespaced with hub:
.
The first argument is a string or array of strings listing the event names to be forwarded.
The second argument is optional, and is the scope on which the event are to be broadcasted. If
an argument is not provided, it defaults to $rootScope
. As a reminder, broadcasted events are
propagated down to descendant scopes.
Example
An easy way to make hub events available across your app:
//in the top level module of the app
angular.module('myApp', [
'roy.signalr-hub',
'myApp.MyCtrl'
]).
factory('myHub', function(hubFactory) {
var myHub = hubFactory();
myHub.forward('interesting-event');
return myHub;
});
angular.module('myApp.MyCtrl', []).
controller('MyCtrl', function() {
$scope.$on('hub:interesting-event', function(ev, data) {
});
});
hubFactory(hubName, { hub: }}
The first argument: hubName
is a required parameter, it specifies the name of the Hub that you have created on the Server.
For next argument is optional, this option allows you to provide the hub
service with a SignalR.NET hub
object to be used internally.
This is useful if you want to connect on a different path, or need to hold a reference to the SignalR.NET hub
object for use elsewhere.
Example
angular.module('myApp', [
'roy.signalr-hub'
]).
factory('myHub', function (hubFactory) {
var mySpecialHub = $.hubConnection('/some/path', {useDefaultPath: false});
myHub = hubFactory('yourHubName', {
hub: mySpecialHub
});
return myHub;
});
hub.error
A handler for error events. Works just like the method of the same name from SignalR.NET.
Example
angular.module('myApp', [
'roy.signalr-hub'
]).
factory('myHub', function (hubFactory) {
myHub = hubFactory('yourHubName');
return myHub;
}).
controller('MyCtrl', function (myHub) {
myHub.error(function (error) {
console.log('SignalR error: ' + error)
});
});
hub.stateChanged
Raised when the connection state changes. Works just like the method of the same name from SignalR.NET.
Example
angular.module('myApp', [
'roy.signalr-hub'
]).
factory('myHub', function (hubFactory) {
myHub = hubFactory('yourHubName');
return myHub;
}).
controller('MyCtrl', function (myHub) {
myHub.stateChanged(function(state){
switch (state.newState) {
case $.signalR.connectionState.connecting:
//your code here
break;
case $.signalR.connectionState.connected:
//your code here
break;
case $.signalR.connectionState.reconnecting:
//your code here
break;
case $.signalR.connectionState.disconnected:
//your code here
break;
}
});
});