angular-sails-socket

Angular Sails Socket

Helpers to bind Angular with Sails' implemention of Socket.io. This includes wrapping of the "RESTful" Socket actions with an Angular promise.

This module depends on the sails.io.js library generated by Sails. It will throw an exception if the Sails library is not loaded before this module.

Wrapping Sails Sockets

The following actions have been wrapped in Angular style promises to ensure that returns are processed in scope, negating the need for $scope.$apply()

• sailsSocket.get
• sailsSocket.post
• sailsSocket.put

Before Angular Sails Sockets, a basic get using sails.io.js could look like:

io.socket.get('/widgets', function(data, response) {
  $scope.widgets = data;
  $scope.$apply();
});

Afterwards, the same call would look like:

sailsSocket.get('/widgets').then(function(data) {
  $scope.widgets = data;
});

If a status code above 400 is returned, the promise is rejected and the response can be handled or ignored in your controller depending on your needs.

We can actually simplify the above code even more, thanks to a few custom helpers that are included in the library. For example, the following code functions identical to the snippet above, but in a single line:

$scope.widgets = sailsSocket.populateMany('widgets');

Sails Socket Helpers and Bindings

The following custom helpers and bindings are available to take care of many common tasks involved in communicating between Angular and Sails via Sockets:

• sailsSocket.populateOne / sailsSocket.populateMany

This will automatically populate a scope variable with the data returned from the socket request. populateOne is used for a single variable or object while populateMany can be used for populating a collection of objects:

$scope.myWidget = sailsSocket.populateOne('widgets/1234');
$scope.widgets = sailsSocket.populateMany('widgets');

• sailsSocket.sync / sailsSocket.syncOne / sailsSocket.syncMany

Listen to incoming Socket events and update the scope variable specified. Using sync, the provided scope variable will be checked and the appropriate syncOne or syncMany helper will be called. Similar to the above, these are used based on whether you are observing an object or collection of objects.

sailsSocket.sync($scope.myWidget, 'widget');

• sailsSocket.editable

Instantiates an Angular $watch on the provided variable. Any changes will automatically post data back to the server over sockets. This includes the csrfToken which is required by Sails to authenticate the request. You must provide an array of fields which will be considered editable.

sailsSocket.editable($scope, 'myWidget', ['name', 'serialNumber']);

The csrfToken can be reached manually at $scope.$root.sailsSocket._csrf