• Stars
    star
    136
  • Rank 267,670 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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