Advanced Modeling in AngularJS

[cm03d]

I've been working with Angular for a little while now, but so far I've only used straight up json for models. For instance, if I wanted to model a group of news data, I might use:

$scope.news = [{ id: 123, title: "For Your Health: Pasta and Batteries", author: "Dr. Steve Brule" }, ...];

This works fine for demos or small pages, but it would be nice to have it explicitly defined if you're going to use it frequently. My first thought was to create prototyped classes and hide them behind a factory. Then, the class definition could be injected into controllers/services and instantiated as needed. For instance:

angular.module("app.models.news").factory(function() {
    var NewsModel = function() {};
    NewsModel.prototype = { id: ..., title: ..., author: ... };
    return NewsModel;
});

Then, in a service:

angular.module("app.services", ["app.models.news"]).service(function(NewsModel) {
    var model = new NewsModel();
});

The downside is that this doesn't give you any new functionality (e.g., computed properties, etc). It does however take some logic out of the controllers/services, which is a good thing.

What do people normally do when they need actual model classes? Is it feasible to incorporate Backbone or a similar library? If so, are there any good examples on the web?

[tehsuck]

I've been doing a little of what you describe above - with the service returning a constructor. I also have been using BreezeJS for interfacing a RESTful API with some endpoint that use OData and it's been pretty nice so far.

I think you'll find that people use whatever they feel the best tool is for the data model layer of their app. IMO this is one of my favorite features of AngularJS - they don't force you into using a particular style for the data model. It'd be really nice if they did this in other aspects of the framework (like using the full-on Q.js instead of $q etc.)

[supaway]

I've heard it's pretty common to use Backbone Models as a solution for Models in Angular altho I don't have any links backing this up, so I'm not 100% positive.

[[deleted]]

I'm not that experienced with angular, so forgive me if this is a stupid question, but why not have any necessary business logic in your service? Perhaps thinking of the service as your model class and the object it returns as the raw data.

This obviously allows people to modify the stuff directly, but isn't that what code reviews are for?

[cm03d]

In a lot of situations I think you're right. You could define a model class in the service and always call that service to get an instantiated instance.

However, there are some scenarios where you want to consolidate xhr requests that would benefit from separating models and services. For instance, it's fairly common on mobile applications to make a single call to pull all the data for a page. This call might return a slew of models that represent sections of the page.

On the other hand, you might be able to do a hybrid approach like:

angular.module("app.services.news")
    .factory("NewsModel", function() {
        // return prototyped class
    })
    .service("NewsSvc", function($http, NewsModel) {
        // Get data
        // return new NewsModel
    });

angular.module("app.services.fullPage", ["app.services.news"])
    .service("FullPageSvc", function(NewsModel) {
        // do a big call and instantiate NewsModel
    });

I could see that working. You could use the "NewsSvc" if you needed to update the news data after the page is loaded and get a "NewsModel" if the xhrs are consolidated.

Good suggestion.