$resource
ngResource
A factory which creates a resource object that lets you interact with RESTful server-side data sources.
The returned resource object has action methods which provide high-level behaviors without
the need to interact with the low level $http service.
Requires the ngResource module to be installed.
$resource(url[, paramDefaults][, actions]);
| Param | Type | Details |
|---|---|---|
| url | string | A parametrized URL template with parameters prefixed by If you are using a url with a suffix, just add the suffix, like this:
|
| paramDefaults (optional) | Object | Default values for Each key value in the parameter object is first bound to url template if present and then any
excess keys are appended to the url search query after the Given a template If the parameter value is prefixed with |
| actions (optional) | Object.<Object> | Hash with declaration of custom action that should extend the
default set of resource actions. The declaration should be created in the format of Where:
|
| Object | A resource "class" object with methods for the default set of resource actions
optionally extended with custom Calling these methods invoke an
var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function() {
user.abc = true;
user.$save();
});
It is important to realize that invoking a $resource object method immediately returns an
empty reference (object or array depending on The action methods on the class object or instance object can be invoked with the following parameters:
Success callback is called with (value, responseHeaders) arguments. Error callback is called with (httpResponse) argument. Class actions return empty instance (with additional properties below). Instance actions return promise of the action. The Resource instances and collection have these additional properties:
|
// Define CreditCard class
var CreditCard = $resource('/user/:userId/card/:cardId',
{userId:123, cardId:'@id'}, {
charge: {method:'POST', params:{charge:true}}
});
// We can retrieve a collection from the server
var cards = CreditCard.query(function() {
// GET: /user/123/card
// server returns: [ {id:456, number:'1234', name:'Smith'} ];
var card = cards[0];
// each item is an instance of CreditCard
expect(card instanceof CreditCard).toEqual(true);
card.name = "J. Smith";
// non GET methods are mapped onto the instances
card.$save();
// POST: /user/123/card/456 {id:456, number:'1234', name:'J. Smith'}
// server returns: {id:456, number:'1234', name: 'J. Smith'};
// our custom method is mapped as well.
card.$charge({amount:9.99});
// POST: /user/123/card/456?amount=9.99&charge=true {id:456, number:'1234', name:'J. Smith'}
});
// we can create an instance as well
var newCard = new CreditCard({number:'0123'});
newCard.name = "Mike Smith";
newCard.$save();
// POST: /user/123/card {number:'0123', name:'Mike Smith'}
// server returns: {id:789, number:'01234', name: 'Mike Smith'};
expect(newCard.id).toEqual(789);
The object returned from this function execution is a resource "class" which has "static" method for each action in the definition.
Calling these methods invoke $http on the url template with the given method, params and headers.
When the data is returned from the server then the object is an instance of the resource type and
all of the non-GET methods are available with $ prefix. This allows you to easily support CRUD
operations (create, read, update, delete) on server-side data.
var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function() {
user.abc = true;
user.$save();
});
It's worth noting that the success callback for get, query and other method gets passed
in the response that came from the server as well as $http header getter function, so one
could rewrite the above example and get access to http headers as:
var User = $resource('/user/:userId', {userId:'@id'});
User.get({userId:123}, function(u, getResponseHeaders){
u.abc = true;
u.$save(function(u, putResponseHeaders) {
//u => saved user object
//putResponseHeaders => $http header getter
});
});
Let's look at what a buzz client created with the $resource service looks like: