Using an embedded resource URL in AngularJS $resource

Question

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?

In my opinion when i comes to be too complicated in term of URL i prefer to use my url with $http calls exposing them in a service instead of using $resource. But that's just a matter or tastes. Do you really want to keep up with $resource ? — Okazari
– Okazari, Commented Jul 17, 2015 at 12:42
$resource is a lot cleaner in my opinion. I particularly like the way it returns the object that will be used immediately, and then fills in the object later without the need for any callbacks. — Mark
– Mark, Commented Jul 17, 2015 at 13:19
Yeah i definitely agree with you about this. Kenavoz gave a pretty nice answer though. — Okazari
– Okazari, Commented Jul 17, 2015 at 13:44

SLePort · Accepted Answer · 2015-07-17 13:41:34Z

2

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 :

ownersDogs[0].$savedog();

edited Jul 17, 2015 at 13:41

answered Jul 17, 2015 at 13:17

SLePort

15.5k3 gold badges40 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexandru Olaru · Accepted Answer · 2015-07-17 13:00:39Z

0

You can parametrize the $save in the following way:

ownerDogs[0].$save(function(ownerObject, putResponseHeaders) {
    //ownerObject => saved user object
    //putResponseHeaders => $http header getter
});

answered Jul 17, 2015 at 13:00

Alexandru Olaru

7,1426 gold badges31 silver badges55 bronze badges

Comments

Mark · Accepted Answer · 2015-07-17 13:17:39Z

0

I can't find a way to make use of the Url parameter in the returned resource, but I solved the problem in a different way. You can simply specify different URLs for the save, etc. operations as follows...

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

answered Jul 17, 2015 at 13:17

Mark

1,89417 silver badges27 bronze badges

Collectives™ on Stack Overflow

Using an embedded resource URL in AngularJS $resource

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related