Geek Answers Handbook

Models and collections in Angular?

I'm coming from Backbone, so maybe my perspective is compounded by this, but it's hard for me to see a better way to model data in Angular. Two way data binding is pretty amazing, but the past, when I want to have permanent collections and model classes, I got confused.

I use the ability to define a collection, say about users, and then be able to call .fetch () whenever I want to update it with new models. In addition, I can define my own methods both in the collection and in each model.

var users = new UserCollection(); users.fetch(); users.doSomethingCustom() users.at(0).doSomethingModel();

I looked at Restangular and ngActiveResource, and none of them offer the same functionality as I expected.

Is there something I am missing, or maybe I am thinking of it in Angular style?

EDIT: I ended up creating my own models / collections very similar to Backbone, if that helps someone: https://github.com/evanhobbs/angular-models

+7
javascript angularjs restangular
source share
2 answers

This is a really interesting question, and I would like people to think about solutions. Theoretically, you can stick with Backbone models. Perhaps it has a performance cost. There is no reason this should not work.

Design your model layer without worrying about AngularJS. Then you will need to expand your models and add a listener to your initialization function, which will run $ rootScope. $ applies whenever a model changes, the same for any collection you can use. Something like:

 /*global angular,Backbone*/ angular.module('ng') .value('Backbone', Backbone) .factory('AngularModel', function(Backbone, $rootScope) { return Backbone.Model.extend({ initialize: function() { this.on('all', function() { if (!$rootScope.$$phase) { $rootScope.$apply(); } }); } }); }) .factory('AngularCollection', function(AngularModel, $rootScope) { return Backbone.Collection.extend({ model: AngularModel, initialize: function() { this.on('all', function() { if (!$rootScope.$$phase) { $rootScope.$apply(); } }); } }); }); function Main($scope, AngularCollection) { $scope.collection = new AngularCollection([{ name: "foo" }, { name: "bar" }, { name: "baz" }]); $scope.addModel = function(model) { $scope.collection.add(model); }; }

and presentation

 <body ng-app ng-controller="Main"> <div ng-repeat="model in collection.models">{{model.get('name')}}</div> <form name="model_form" ng-submit="addModel(model)"> <fieldset> <legend>Add model</legend> <label for="">Name</label> <input type="text" ng-model="model.name" /> <input type="submit" /> </fieldset> </form> </body>

Some DEMO HERE

Now, in my opinion, AngularJS works better with raw js hashes. But if you need to move something to AngularJS from Backbone, this might be the solution if it already has a strong model layer.

EDIT: It can work without the expensive $ rootScope. $ apply,

+4
source share

js-data-angular may be the solution to your problem. It defines collections, relations, and various storage adapters with their functionality.

+1
source share

More articles:


All Articles