AngularJS: Creating Objects that map to REST Resources (ORM-Style)

Question

I'm pretty new to AngularJS, but I'm pretty unclear on how to tie it up to my Server's REST Api backend.

For example, say I have an "image" resource that I get by GET-ing: myApi/image/1/. This returns a json object with various fields. Let's say something like:

{url: "some/url", date_created: 1235845} 

Now, I want some kind of representation in my AngularJS app of this "Image" object. This representation is more than just a mapping of the fields - I want to add "helper" functions, for example a function that converts the date_create field into something human-readable.

I know about the $resource service, but I'm unclear what I need to do to create a basic "class" in Angular, that uses Resource to get the JSON object, but then enhances it by adding various helper functions.

Bonus points:

I'm also unclear how to add "relationships" between models. For example, I might have a "user" resource that has embedded inside it an "image" resource, and I'll want to grab the User resource, but be able to call "Image" helper functions on the "Image" part of the model.

Answer 1

JSData
A project which started as angular-data is now "a framework-agnostic data store built for ease of use and peace of mind." It is has excellent documentation and has support for relations, multiple backends (http, localStorage, firebase), validation and of course angular integration.
http://www.js-data.io/

BreezeJS
The AngularJS YouTube channel features this video using BreezeJS

Which is an advanced ORM which even supports client-side filtering and other cool stuff. It best suited for backend that support OData, but can be made to work on other types of backends.

ngResource
Another option is to use the ngResource, here is an example on how to extend it with your own functions:

module.factory('Task', function ($resource) {     var Task = $resource(WEBROOT + 'api/tasks/:id', {id: '@id'}, {update: { method: 'PUT'}});     angular.extend(Task.prototype, {          anExampleMethod: function () {             return 4;         },          /**          * Backbone-style save() that inserts or updated the record based on the presence of an id.          */         save: function (values) {             if (values) {                 angular.extend(this, values);             }             if (this.id) {                 return this.$update();             }             return this.$save();         }     });     return Task; }); 

I found ngResource to be very limited, even compared to Backbone.Model which has:

• Custom JSON parsing via Model.parse
• Possible to extend a BaseModel (No the baseUrl in ngResource)
• Other hooks like Backbone.sync, which enables LocalStorage, etc.

Restangular
"AngularJS service to handle Rest API Restful Resources properly and easily"
https://github.com/mgonto/restangular

Or try some of the other ORM's
https://stackoverflow.com/questions/6786307/which-javascript-orm-to-use

Answer 2

I'm creator of Restangular so my opinion can be biased.

But as Bob said, you can use Restangular for it.

Restangular uses your Restful API Resources to go over the tree. You can also add new methods to this.

This is coding example: https://github.com/mgonto/restangular#lets-code

And this way you can add new methods to your object (The bonus points :)) https://github.com/mgonto/restangular#creating-new-restangular-methods

Hope this works out for you :).

Otherwise, you can also use ngResource ($resource) for this but in my opinion, it needs some "love" and "sugar".

Bests