$resource

ngResource is a module that provides us with a $resource service. We can use this to make API calls.

We can wrap our resource up in a factory, allowing us to generate a resource that will make an API call on our behalf and instantiate itself.

$scope.author = $resource('http://simple-api.herokuapp.com/api/v1/authors/:id').get({ id: 1 });

The $scope.author object is in fact a promise. When the promise is fulfilled, the author will instantiate itself. This gives us this rather nice syntax, even though the author is instantiated asynchronously.

Using a factory

It's common to create resources using a factory, like so:

app.factory('Author', function($resource) {
            return $resource('http://simple-api.herokuapp.com/api/v1/authors/:id');
          });

We can now get an author:

var author = Author.get({ id:1 });

There's some magic going on here. The author object is in fact a promise that will configure itself when it is satisfied.

Making overrides

We can make overrides to our resource routes by passing in a configuration object. This lets us use custom methods and URLs.

app.factory('Author', function($resource) {
            return $resource('http://simple-api/api/vi/authors/:id', {}, {
              update: {
                method: 'PUT'
              }
            });
          });

Reading

Read the API spec here: https://docs.angularjs.org/api/ngResource/service/$resource

Resource Exercise

Extend your CRUD exercise. Create a comment resource and use it to pull comments for articles.

For extra bonus points create a comments directive. You might write:

<comments for="12" />

to get the comments for article 12.

Code Samples