javascript - Models and Collections in Angular? - Stack Overflow

admin管理员组

文章数量:1297095

I'm ing from Backbone so perhaps my perspective is prejudiced by that but I'm having trouble seeing the best way to model data in Angular. The 2-way data-bind is pretty awesome but past that when I want to have persistent collection and model classes I'm confused.

I'm using to being able to define a collection, say of users, and then being able to call .fetch() whenever I want to update it with new models. As well I can define custom methods on the collection as well as each model.

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

I've looked at Restangular and ngActiveResource so far and neither one seems to offer the same kind of functionality as I would expect.

Is there something I'm missing or perhaps I'm thinking about this in a non-Angular way?

EDIT: I ended up making my own models/collections very similar to Backbone's if it helps anyone:

I'm ing from Backbone so perhaps my perspective is prejudiced by that but I'm having trouble seeing the best way to model data in Angular. The 2-way data-bind is pretty awesome but past that when I want to have persistent collection and model classes I'm confused.

I'm using to being able to define a collection, say of users, and then being able to call .fetch() whenever I want to update it with new models. As well I can define custom methods on the collection as well as each model.

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

I've looked at Restangular and ngActiveResource so far and neither one seems to offer the same kind of functionality as I would expect.

Is there something I'm missing or perhaps I'm thinking about this in a non-Angular way?

EDIT: I ended up making my own models/collections very similar to Backbone's if it helps anyone: https://github./evanhobbs/angular-models

• javascript
• angularjs
• backbone.js
• restangular

Share Improve this question Follow edited Jul 16, 2015 at 21:01 Evan Hobbs asked Jun 12, 2014 at 15:10 Evan HobbsEvan Hobbs 3,67266 gold badges3333 silver badges4545 bronze badges 4

• its what you want to make of it! – Daniel A. White Commented Jun 12, 2014 at 15:11
• Well, I'd like to not reinvent the wheel if I can. Modeling data seems a mon enough problem that I'm surprised to not find a munity solution already. – Evan Hobbs Commented Jun 12, 2014 at 15:18
• 1 I think what you want is to define an Angular service that holds a collection. The service can load the collection from a database and then all you need to do is define the functions of the service. I do like Restangular though, you should look more into it and try it out, it is in my opinion better suited for using an API then Angular's $resource is. – m.e.conroy Commented Jun 12, 2014 at 15:44
• 1 I've used restangular a fair bit now and while it's great for interacting with rest resources it's not really a solution for data modeling except in fairly simple applications. I ended up rolling my own model and collection base classes. – Evan Hobbs Commented Jun 16, 2014 at 15:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This is indeed a very interesting question,and I'd like people to think about solutions. In theory,you could stick with Backbone models.It may have a performance cost but.There is no reason it wouldnt work.

Develop your model layer,without thinking about AngularJS.Then you'd have to extend your models and add a listener in your initialize function that would trigger a $rootScope.$apply whenever the model changes,same for any collection you might 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 the view

<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 port something to AngularJS from Backbone,it can be a solution if already have a strong model layer.

EDIT:it might work without the expensive $rootScope.$apply,

js-data-angular might be a solution for your problem. It defines collections, their relations and different storage adapters with their fetching functionality.

本文标签： javascriptModels and Collections in AngularStack Overflow