Angular $resource

Why is this important?

This workshop is important because:

• $resource is a valuable tool for setting up http requests to an API

What are the objectives?

After this workshop, developers will be able to:

• Know the difference between $http and $resource
• Describe what a factory is in Angular
• Refactor $http using $resource in a factory

Where should we be now?

Before this workshop, developers should already be able to:

• Set up $http in Angular to hit an API from an Angular app.

Angular Review Questions

• What is Angular for?
• What is an SPA? Why does Angular make SPAs easier to build?
• Summarize the answer from the Reddit question.

$http Review

What is $http?

[$http](https://docs.angularjs.org/api/ng/service/$http) is a core Angular service that facilitates communication with remote HTTP servers via the browser's XMLHttpRequest object or via JSONP. It is very similar to jQuery's $.ajax function.

What does $http have to do with SPAs?

In single page applications we don't have page refreshes. Everything is done using asynchronous http requests using client side JS. In angular we do that using the $http service

Code Example

function addCriminal(){
    $http
      .post('http://localhost:3000/criminals', self.newCriminal)
      .then(function(response){
        self.all.push(response.data.criminal)
    });
    self.newCriminal = {};
  }

$resource

$resource in Angular is a helper method that gives us all of the $http CRUD verbs in one method.

Of course these aren't routes, they are AJAX requests. Here's an example:

  app.factory("Wine", function($resource) {
    return $resource("http://daretoexplore.herokuapp.com/wines/:id")
  });

  app.controller('WineController',function($scope, Wine) {
    var wine = Wine.get({ id: $scope.id }, function() {
      console.log(wine);
    }); // get() returns a single wine
  };

Specifically, $resource utilizes what is known as a factory in Angular.

What is the relationship between $http and $resource?

$resource is a layer of abstraction on $http which provides all of the $http methods to be called on the resource.

What is a factory?

Now is a good time to talk a bit more about Factories in Angular and what they do.

Factories are a way to DRY out your code and separate concerns by modularizing your code. They make methods and properties available by returning an object that can be included wherever it is needed. What does that remind you of from node?

• A factory returns an object of properties and methods.
• A factory can be injected to make those properties and methods available elsewhere.

What does that mean for the code?

Declaring

  app.factory('myFactory', myFactoryFunction);

Injecting (behind the scenes)

myInjectedFactory  <----  myFactoryFunction()

Factory Function

function myFactoryFunction() {
  function awesomeApi(optional) {
    return awesomeListOfValues;
  }

  // expose a public API
  return {
    awesomeApi: awesomeApi
  };
}

Putting it together

• What is a factory?
• Why would we use them?

Independent Practice

Refactor your Infamous Criminals app from Monday to use $resource!

Setup:

• The http-lab frontend does not have bower in it yet, so how do you start a new bower project in the frontend folder?
• Install angular with bower and include it in your HTML
• The $resource factory doesn’t come bundled with the main Angular script. Run bower install --save angular-resource
• Add a link to the angular-resource module in your index.html (BELOW angular.js!):

<script src="bower_components/angular-resource/angular-resource.min.js"></script>

• Now you need to load the $resource module into your application.

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

• Don't forget to $inject $resource into your Criminal factory.

• Don't forget to $inject that factory into your controller.

• In the application directory, run a local server:

python -m SimpleHTTPServer 8000

• Finally, make sure your Node API is running, too.

Additional Resources

Angular $resource docs

CRUD using $resource

Factory vs Service

Factory vs Service vs Provider