Using Backbone models with AngularJS

Question

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?

Answer 1

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.

Answer 2

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/

Answer 3

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.