Bower Component for using AngularJS with SignalR.NET.

1. bower install angular-signalr or download the zip.
2. Make sure the SignalR.NET client lib is loaded.
3. Include the jquery.signalR.min.js script provided by this component into your app.
4. Add roy.signalr-hub as a module dependency to your app.

This module exposes a hubFactory, which is an API for instantiating signalr-hubs that are integrated with Angular's digest cycle.

// 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!

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

Takes an event name and callback. Works just like the method of the same name from SignalR.NET.

Takes an event name and callback. Works just like the method of the same name from SignalR.NET.

Sends a message to the server. Works just like the method of the same name from SignalR.NET.

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.

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) {
      
      });
    });
   

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.

angular.module('myApp', [
  'roy.signalr-hub'
]).
factory('myHub', function (hubFactory) {
  var mySpecialHub = $.hubConnection('/some/path', {useDefaultPath: false});

  myHub = hubFactory('yourHubName', {
    hub: mySpecialHub
  });

  return myHub;
});

A handler for error events. Works just like the method of the same name from SignalR.NET.

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)
  });
});

Raised when the connection state changes. Works just like the method of the same name from SignalR.NET.

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;
    }
  });
});