Angular Sails Bind

An AngularJS service to bind Angular models with sailsjs backend models using socket.io.

Add it as a dependency to your angular app, and then bind any model IN JUST ONE LINE!!!!!

  $sailsBind.bind("<your model name here>", $scope);

how much it weights? It takes only 3171 bytes of pure javascript to add this magic to your angularjs project.

What it does:

Creates the model inside the $scope for you.
Retrieves the model data from the backend using socket.
Watches for changes made by the user in the UI and updates the backend immediately.
Watches for changes made in the backend and updates the UI immediately.
Ensure consistency for relationships between different models
Propagate events through easy to use callbacks

Installation:

bower install angular-sails-bind

Usage

A small example:

var app = angular.module("MyApp", ['ngSailsBind']);
app.controller("ItemsCtrl", function ($scope, $sailsBind) {
  // To easily add new items to the collection.
  $scope.newItem = {};  
  /** This will:
  *     1. Add a "items" model to $scope. (pluralized)
  *     2. Get the data from your http://<examplesite.com>/item thru sailsjs socket get.
  *     3. Setup socket io so that, when something changes in the sailsjs backend, they will be reflected
  *        in the angular "items" model.
  *     4. Watch the "items" model for collection changes in angular (add and removal of items
  *        and send them to the backend using socket.
  **/
  $sailsBind.bind("item", $scope);

<div ng-controller="ItemsCtrl">
  <input ng-model="newItem.name"/><a href="" ng-click="items.push(newItem);newItem={}">Add New</a>
  <ul>
    <li ng-repeat="item in items">{{item.name}} <a href="" ng-click="items.splice(items.indexOf(item), 1)">remove</a></li>
  </ul>
</div>

Getting a subset of the model:

You can filter the initial model content by adding a third parameter to the $sailsBind function (thanks @Shalotelli for the request).

   $sailsBind.bind("item", $scope, {"name": {"contains": "Foo"}};

Getting events:

   $sailsBind.bind("item", $scope, {"name": {"contains": "Foo"}, onEvent};

   function onEvent(event, message){
    // Event are triggered after the scope has been updated according to this event data : 
    // initialized => when the collection is initialized
    // created     => when an object is created and added to collection
    // updated     => when an object is updated
    // destroyed   => when an object is deleted
    // addedTo     => when an instance of the object has been added to the collection of another model (Must be triggered manually in sails with pub events)
    // removedFrom => when an instance of the object has been removed of the collection of another model (Must be triggered manually in sails with pub events)
    console.log(event + " -> " + JSON.stringify(message))
   }

This third parameter is a json that follows the "where" clause syntax, as documented in sails' find call: http://beta.sailsjs.org/#!documentation/reference/Blueprints/FindRecords.html

Khopa/angular-sails-bind

Angular Sails Bind

Usage