Skip to content

diegopamio/angular-sails-bind

Repository files navigation

Angular Sails Bind

Code Climate Rating Coverage Status devDependency Status Sauce Test Status Ohloh Info Codeship Status for diegopamio/angular-sails-bind

Sauce Test Status

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 2073 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.

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

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

About

An angular service to bind scope models to sailsjs models thru socket

Resources

License

Stars

Watchers

Forks

Packages

No packages published