Using Backbone models with AngularJS

Recently I was thinking about the differences and similarities between Backbone.js and AngularJS.

What I find really convenient in Backbone are the Backbone-Models and the Backbone-Collections. You just have to set the urlRoot and then the communication with the backend-server via Ajax basically works.

Shouldn't it be possible to use just the Backbone-Models and Collections in AngularJS application? So we would have the best of both worlds two-way data-binding with AngularJS and convenient access to the server-side (or other storage options) through Backbone-Models and Collections.

A quick internet search didn't turn up any site suggesting this usage scenario. All resources either talk about using either the one or the other framework.

Does someone have experience with using Backbone-Models or Collections with AngularJS. Wouldn't they complement each other nicely? Am I something missing?

a working binding for example above... http://jsbin.com/ivumuz/2/edit

it demonstrates a way for working around Backbone Models with AngularJS. but setters/getters connection would be better.

Had a similar idea in mind and came up with this idea: Add just a getter and setter for ever model attribute.

Backbone.ngModel = Backbone.Model.extend({
        initialize: function (opt) {
         _.each(opt, function (value, key) {
             Object.defineProperty(this, key, {
                 get: function () {
                     return this.get(key)
                  },
                 set: function (value) {
                     this.set(key, value);
                 },
                 enumerable: true,
                 configurable: true
             });
         }, this);
     }
 });

See the fiddle: http://jsfiddle.net/HszLj/

I was wondering if anyone had done this too. In my most recent / first angular app, I found Angular to be pretty lacking in models and collections (unless I am missing something of course!). Sure you can pull data from the server using $http or $resource, but what if you want to add custom methods/properties to your models or collections. For example, say you have a collections of cars, and you want to calculate the total cost. Something like this:

With a Backbone Collection, this would be pretty easy to implement:

carCollection.getTotalCost()

But in Angular, you'd probably have to wrap your custom method in a service and pass your collection to it, like this:

carCollectionService.getTotalCost(carCollection)

I like the Backbone approach because it reads cleaner in my opinion. Getting the 2 way data binding is tricky though. Check out this JSBin example.

http://jsbin.com/ovowav/1/edit

When you edit the numbers, collection.totalCost wont update because the car.cost properties are not getting set via model.set().

Instead, I basically used my own constructors/"classes" for models and collections, copied a subset of Backbone's API from Backbone.Model and Backbone.Collection, and modified my custom constructors/classes so that it would work with Angular's data binding.

Try taking a look at restangular.

I have not implemented it anywhere, but I saw a talk on it a few days ago. It seems to solve the same problem in an angular way.

Video: http://www.youtube.com/watch?v=eGrpnt2VQ3s

Valid question for sure.

Lot of limitations with the current implementation of $resource, which among others doesn't have internal collection management like Backbone.Collection. Having written my own collection/resource management layer in angular (using $http, not $resource), I'm now seeing if I can substitute much of the boilerplate internals for backbone collections and models.

So far the fetching and adding part is flawless and saves code, but the binding those backbone models (or the attributes within, rather) to ng-models on inputs for editing is not yet working.

@ericclemmons (github) has done the same thing and got the two to marry well - I'll ask him, get my test working, and post the conclusion...

I was wondering the same-

This is the use-case:

salesforce mobile sdk (hybrid) has a feature called smartstore/smartsync, that expects backbone models/collection ,which gets saved to local storage for offline access .

And you guessed it right, we want to use angularjs for rest of the hybrid app.

Valid question.

-Sree

You should look at the angularJS boilerplate with parse here. Parse is backbone like, but not exactly backbone. Thats where im starting my idea of a angularJS backboneJS project