Ng Backbone

Backbone data model and collection for AngularJS
Alternatives To Ng Backbone
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Angular Model Factory234
67 years ago4November 09, 201519mitJavaScript
angular-model-factory makes working with RESTful APIs in AngularJS easy!
Peepcode Tunes206
4 years ago3JavaScript
Peepcode's Backbone.js Music Player Reimplemented in AngularJS
Backbone.directives128
9 years agomitJavaScript
Give your backbone apps super-powers with AngularJS style directives.
Ng Backbone44
7 years agoJanuary 30, 20153mitJavaScript
Backbone data model and collection for AngularJS
Angular Snapshot24
9 years ago2CSS
Distributed node-webkit program that watches for websites to screenshot and capture html to post to a hook. Excellent for AngularJS, EmberJS, Backbone, or etc.
Backbone Phonecat21
9 years agoJavaScript
AngularJS tutorial application "PhoneCat" coded in Backbone.js
Angular Resource Collection20
10 years agomitJavaScript
Backbone-like collections for AngularJS resources
Bikini13
37 years agoOctober 21, 20151otherJavaScript
Offline Synchronisation for Backbone (deprecated)
Minimal Blog Silex Angular13
10 years agoJavaScript
Angular Bone10
11 years ago2JavaScript
Backbone services for Angular
Alternatives To Ng Backbone
Select To Compare


Alternative Project Comparisons
Readme

ng-backbone

Backbone data model and collection for AngularJS

GitHub release Build Status Coverage Status

David David

Dependencies

Backbone factory

To make Backbone work properly with AngularJS, ng-backbone overrides Backbone's sync and ajax methods.

NgBackboneModel

Base NgBackbone model extends Backbone.model by adding additional properties and functions, including $attributes and $status. When overriding NgBackboneModel set method but you would like to keep $attributes, you'll have to explicitly call NgBackboneModel set:

var Sample = NgBackboneModel.extend({  
  set: function(key, val, options) {  
    NgBackboneModel.prototype.set.apply(this, arguments);  
  }  
});  

In rare cases when you want to override the constructor which allows you to replace the actual constructor function for your model, you should invoke NgBackboneModel constructor in the end.

var Sample = NgBackboneModel.extend({  
  constructor: function() {  
    this.text = 'Sample!';  
    NgBackboneModel.apply(this, arguments);  
  }  
});  

The $attributes property allows application to use AngularJS two-way binding to manipulate Backbone objects using Backbone get and set.
HTML:

<input type="text" ng-model="person.$attributes.name">  

Javascript:

$scope.person = new Person({  
  name: 'John'  
});  

The $status property is the hash containing model sync state. Since $status updates using Backbone event, passing {silent: true} will prevent $status from updating. $status contains four properties, including:

  • deleting: Set to true when invoking destroy method on model (HTTP DELETE request)
  • loading: Set to true when fetching model data from server (HTTP GET request)
  • saving: Set to true when creating or updating model (HTTP POST or PUT request)
  • syncing: Set to true whenever a model has started a request to the server

HTML:

<span ng-if="user.$status.loading">Loading</span>  
<label>{{user.name}}</label>  

Javascript:

$scope.user = new User({id: '123'});  
$scope.user.fetch();  

$resetStatus

Reset all properties on $status including deleting, loading, saving, and syncing back to false

$setStatus

Update model status on $status

Parameters

attributes
Type: Object
Set one or multiple statuses

options
Type: Object
Options

NgBackboneCollection

Base NgBackbone collection extends Backbone.collection by adding additonal properties and functions, such as $models and $status.

Similar to NgBackboneModel, in rare cases where you may want to override the constructor, you should invoke NgBackboneCollection in the end.

var SampleCollection = NgBackboneCollection.extend({  
  constructor: function(models, options) {  
    this.allSamples = false;  

    NgBackboneCollection.apply(this, arguments);  
  }  
});  

The $models property creates a one-way binding to collection models which is the Javascript array of models. Application can only access the array with $models but will not be able to modify it.
HTML:

<ul>  
  <li ng-repeat="user in users.$models">{{user.username}}<li>  
</ul>  

Javascript:

$scope.users = new Users();  
$scope.users.fetch();  

The $status property is the hash containing collection and its models sync state. Since $status updates using Backbone event, passing {silent: true} will prevent $status from updating. $status contains four properties, including:

  • deleting: Set to true when one of its models is getting destroyed (HTTP DELETE request)
  • loading: Set to true when fetching collection data from server (HTTP GET request)
  • saving: Set to true when creating or updating one of its models (HTTP POST or PUT request)
  • syncing: Set to true whenever a collection has started a request to the server

HTML:

<ul>  
  <li ng-if="users.$status.loading">Loading...</li>  
  <li ng-repeat="user in users.$models">{{user.username}}<li>  
</ul>  

Javascript:

$scope.users = new Users();  
$scope.users.fetch();  

$setStatus

Update collection status

Type: function

Parameters

attributes
Type: Object
Set on or multiple statuses

options
Type: Object
Options

$resetStatus

Reset all statuses including deleting, loading, saving, and syncing back to false

Type: function

Popular Angularjs Projects
Popular Backbone Projects
Popular Web User Interface Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Http
Angularjs
Properties
Backbone