# `$resource` ( service in module `ngResource` )

## Description

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.

# Installation

To use $resource make sure you have included the `angular-resource.js` that comes in Angular package. You can also find this file on Google CDN, bower as well as at code.angularjs.org.

Finally load the module in your application:

       angular.module('app', ['ngResource']);

and you are ready to get started!

## Dependencies

- `$http`

## Usage

    $resource(url[, paramDefaults][, actions]);

### Parameters

- `url – {string} –`

  A parametrized URL template with parameters prefixed by `:` as in `/user/:username` . If you are using a URL with a port number (e.g. `http://example.com:8080/api` ), you'll need to escape the colon character before the port number, like this: `$resource('http://example.com\\:8080/api')` .

- `paramDefaults(optional) – {Object=} –`

  Default values for `url` parameters. These can be overridden in `actions` methods. If any of the parameter value is a function, it will be executed every time when a param value needs to be obtained for a request (unless the param was overridden).

  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 `/path/:verb` and parameter `{verb:'greet', salutation:'Hello'}` results in URL `/path/greet?salutation=Hello` .

  If the parameter value is prefixed with `@` then the value of that parameter is extracted from the data object (useful for non-GET operations).

- `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 `$http.config`:

      {action1: {method:?, params:?, isArray:?, headers:?, ...},
       action2: {method:?, params:?, isArray:?, headers:?, ...},
       ...}

  Where:

  - `action` – {string} – The name of action. This name becomes the name of the method on your resource object.
  - `method` – {string} – HTTP request method. Valid methods are: `GET` , `POST` , `PUT` , `DELETE` , and `JSONP` .
  - `params` – {Object=} – Optional set of pre-bound parameters for this action. If any of the parameter value is a function, it will be executed every time when a param value needs to be obtained for a request (unless the param was overridden).
  - `url` – {string} – action specific `url` override. The url templating is supported just like for the resource-level urls.
  - `isArray` – {boolean=} – If true then the returned object for this action is an array, see `returns` section.
  - `transformRequest` – `{function(data, headersGetter)|Array.}` – transform function or an array of such functions. The transform function takes the http request body and headers and returns its transformed (typically serialized) version.
  - `transformResponse` – `{function(data, headersGetter)|Array.}` – transform function or an array of such functions. The transform function takes the http response body and headers and returns its transformed (typically deserialized) version.
  - `cache` – `{boolean|Cache}` – If true, a default $http cache will be used to cache the GET request, otherwise if a cache instance built with `$cacheFactory`, this cache will be used for caching.
  - `timeout` – `{number}` – timeout in milliseconds.
  - `withCredentials` - `{boolean}` - whether to to set the `withCredentials` flag on the XHR object. See requests with credentials for more information.
  - `responseType` - `{string}` - see requestType.

### Returns

`{Object}` –

A resource "class" object with methods for the default set of resource actions optionally extended with custom `actions` . The default set contains these actions:

    { 'get':    {method:'GET'},
      'save':   {method:'POST'},
      'query':  {method:'GET', isArray:true},
      'remove': {method:'DELETE'},
      'delete': {method:'DELETE'} };

Calling these methods invoke an `ng.$http` with the specified http method, destination and parameters. When the data is returned from the server then the object is an instance of the resource class. The actions `save` , `remove` and `delete` are available on it as methods with the `$` prefix. This allows you to easily perform CRUD operations (create, read, update, delete) on server-side data like this:

          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 `isArray` ). Once the data is returned from the server the existing reference is populated with the actual data. This is a useful trick since usually the resource is assigned to a model which is then rendered by the view. Having an empty object results in no rendering, once the data arrives from the server then the object is populated with the data and the view automatically re-renders itself showing the new data. This means that in most case one never has to write a callback function for the action methods.

The action methods on the class object or instance object can be invoked with the following parameters:

- HTTP GET "class" actions: `Resource.action([parameters], [success], [error])`
- non-GET "class" actions: `Resource.action([parameters], postData, [success], [error])`
- non-GET instance actions: `instance.$action([parameters], [success], [error])`

The Resource instances and collection have these additional properties:

- `$then` : the `then` method of a `promise` derived from the underlying `$http` call.

  The success callback for the `$then` method will be resolved if the underlying `$http` requests succeeds.

  The success callback is called with a single object which is the `http response` object extended with a new property `resource` . This `resource` property is a reference to the result of the resource action — resource object or array of resources.

  The error callback is called with the `http response` object when an http error occurs.

- `$resolved` : true if the promise has been resolved (either with success or rejection); Knowing if the Resource has been resolved is useful in data-binding.

## Example

# Credit card resource

         // 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
           });
         });

# Buzz client

Let's look at what a buzz client created with the `$resource` service looks like:

#### Source

#### Demo