Using an embedded resource URL in AngularJS $resource

mark Published at Dev

Mark

So, I have a REST resource along these lines...

/api/Dogs
/api/Dogs/1
/api/Dogs/2
...

Where a Dog looks like...

{
    Id: 1,
    Url: "http://kennelclub/api/Dogs/1",
    Name: "Butch"
}

and a second resource like so...

/api/Owners
/api/Owners/1
....

As a convenience, to get the dogs for an owner I have this method of querying...

/api/Owners/1/Dogs/

Now, it's trivially easy to get an AngularJS $resource to read an owners dogs, as follows...

var ownersDogs = $resource("/api/Owners/:ownerId/Dogs/:dogId", { dogId: "@Id" });
var ownersDogs.query({ ownerId: 1 });

Finally, a Question

I want to make a change to a dog obtained via this URL with magic angular $save function...

ownersDogs[0].Name = "Barry";
ownersDogs[0].$save();

However, there are two problems here...

this convenience resource url is read only (i.e. doesn't accept PUT/POST).
Even if it wasn't, I need to re-supply the ownerId to the $get/$save functions on the objects to work correctly.

If I want to edit the dog returned, I need to use the /api/Dogs/1 url. This both allows read/write, and doesn't require an ownerId. You'll notice that this Url is already embedded in the Dog object returned.

Is there some way I can get the $save, $get, etc. functions on the returned object to automatically(?) use the Url embedded in the resource? Or at least, is there some way to change the URL that $save will use?

SLePort

You can add custom methods to your resource with custom url :

var ownersDogs = $resource("/api/Owners/:ownerId/Dogs/:dogId", { dogId: "@Id" },
    {
    'savedog': { method : 'PUT', url: '/api/Dogs/:dogId'}
    }
);

Calling it with :