Assignment 3X: How about a nice Dependency Injection?

[al-the-x]

• [ ] Progress Review
• [ ] Three Little Things

• [x] Getting Data and Dependency Injection

  • How do I get data with Angular JS? No jQuery.get() here...
  • What are Services and how do I use them?
  • Dependency Injection (DI) in brief...
  • Requesting the $http service...
  • Using the $http service to get data:

  angular.module('etsyCatalog', [ ])
  .controller('MainController', [ '$http', function($http){
    this.products = [ ];
  
    $http.get('/path/to/products.json').then(function(products){
      // now what?
    });
  } ])
  ; // END module(etsyCatalog)

  • Using self as an alias for this... ick.
  • A better approach with Restangular:

  angular.module('etsyCatalog', [ 'restangular' ])
  .controller('MainController', [ 'Restangular', function(Restangular){
    Restangular.setBaseUrl('/path/to');
  
    this.products = Restangular.all('products').getList().$object;
    // `$object` is an empty `Array` that is filled with data on success
  } ])
  ; // END module(etsyCatalog)

• [ ] Custom Services

  • You can define your own Services for injection!
  • Just use angular.factory (angular.service is confusing):

  angular.module('etsyCatalog', [ 'restangular' ])
  .factory('Products', [ 'Restangular', function(Restangular){
    Restangular.setBaseUrl('/path/to'); // We might repeat this a little...
  
    return Restangular.service('products');
  } ])
  .controller('MainController', [ 'Products', function(Products){
    this.products = Products.getList().$object;
  } ])
  ; // END module(etsyCatalog)

[al-the-x]

This could be assigned either Wed or Thu, like #337

[al-the-x]

Refactoring to a Service can be done without Restangular. Don't feel compelled to show either if time is short.