NgResource resolves nested resources

Question

What options exist to allow nested resources in ngResource responses?

There were some related questions about resolving endpoints for a nested resource in ngResource, but this question is related to when the REST answer contains a second resource nested in the requested collection, especially 1 to 1 mappings, where you would like pets/<id>/owner as your own resource.

Let's say that there are two resources: Pets and Owners :

GET / Pets:

 [{ name: 'spark', type: 'dog', owner: '/owners/3/' # alternatively just '3' or the full object. }] 

As a developer, I sometimes want to request the Owner resource as a whole, sometimes I want to request the Pet resource, and then I automatically want to enable the Owner attribute in the resource instance.

This is my current solution:

 .factory('Pet', function ($resource, Owner) { var Pet = $resource('/pets/:id', {id: '@id'}); Pet.prototype.getOwner = function () { return new Owner(this.owner); // or Owner.get({id: this.owner}) } return Pet; }) 

There are many problems. There is one integrity. This implementation, I believe, allows you to use multiple instances of the same resource. Then there is practicality. You also have additional attributes for tracking ( Owner and getOwner() , not just Owner , possibly setOwner if you want to save the model).

An alternative solution could be built on transformResponse , but it would be like hacks to include this in every resource that has a nested mapping.

Answer 1

I believe that it is for this reason that Martin Gontnikovsky created Restangular. He did not like dealing with nested $ resources in the main angular structure. I think that his restoration solution will fit perfectly into your needs. His code is on GitHub here , and he got a nice introductory video on youtube here .

Check this. I think you will find that he does exactly what you want.

Answer 2

Update . I worked a bit on this and started a new angular module available on GitHub . The answer below is about Gist, which I wrote initially.

There seems to be nothing like what I was looking for. I started implementing a solution that only supports get and getList (query) operations. The rest of the methods should be trivial to add, since I pretty much supported the layout of the ngResource module. The bottom line for my implementation is below.

https://gist.github.com/lyschoening/7102262

Resources can be embedded in JSON either as complete objects that are simply wrapped in the correct Resource model, or as URIs that are automatically resolved. In addition to the embedded resources, the module also supports typical nested resources either as real parent-child collections (where the resource is available only after selecting the parent) or as a collection with cross-references.

 Yard = Resource('/yard') # resource model Yard.$nested('trees') # embedded item or list of items Chair = Resource('/chair') Yard.$nested('/chair') # sub-collection without its own model # (for many-to-many) Tree = Resource('/tree') # child-collection with its own model TreeHouse = Tree.$childResource('/treehouse') yard = Yard.get(1) # GET /yard/1 # { # "uri": "/yard/1", # "trees": [ # "/tree/15", -- reference, looked-up automatically with GET # {"uri": "/tree/16", "name": "Apple tree"} # -- full object, resolved to Tree instance # ] # } # GET /tree/16 # {"uri": "/tree/15", "name": "Pine tree"} yard.chair.getList() # GET /yard/1/chair # [{"uri": "/chair/1", ...}, ..] # -- model inferred from URI yard.trees[0].treehouse.getList() # GET /tree/15/treehouse # [{"uri": "/tree/15/treehouse/1", ...}, ..] # -- automatically resolved to TreeHouse instance