step-7 XHR & Dependency Injection

- Replace the in-memory dataset with data loaded from the server (in the form of a static
  'phone.json' file to keep the tutorial backend agnostic):
  - The JSON data is loaded using the `$http` service.
- Demonstrate the use of `services` and `dependency injection` (DI):
  - `$http` is injected into the controller through DI.
  - Introduce DI annotation methods: `.$inject` and inline array

Closes #207

Author: petebacondarwin

app/phone-list/phone-list.component.js

@@ -5,23 +5,12 @@ angular.
   module('phoneList').
   component('phoneList', {
     templateUrl: 'phone-list/phone-list.template.html',
-    controller: function PhoneListController() {
-      this.phones = [
-        {
-          name: 'Nexus S',
-          snippet: 'Fast just got faster with Nexus S.',
-          age: 1
-        }, {
-          name: 'Motorola XOOM™ with Wi-Fi',
-          snippet: 'The Next, Next Generation tablet.',
-          age: 2
-        }, {
-          name: 'MOTOROLA XOOM™',
-          snippet: 'The Next, Next Generation tablet.',
-          age: 3
-        }
-      ];
+    controller: function PhoneListController($http) {
+      var self = this;
+      self.orderProp = 'age';
 
-      this.orderProp = 'age';
+      $http.get('phones/phones.json').then(function(response) {
+        self.phones = response.data;
+      });
     }
   });

app/phone-list/phone-list.component.spec.js

@@ -7,17 +7,27 @@ describe('phoneList', function() {
 
   // Test the controller
   describe('PhoneListController', function() {
-    var ctrl;
+    var $httpBackend, ctrl;
+
+    // The injector ignores leading and trailing underscores here (i.e. _$httpBackend_).
+    // This allows us to inject a service and assign it to a variable with the same name
+    // as the service while avoiding a name conflict.
+    beforeEach(inject(function($componentController, _$httpBackend_) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json')
+                  .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
 
-    beforeEach(inject(function($componentController) {
       ctrl = $componentController('phoneList');
     }));
 
-    it('should create a `phones` model with 3 phones', function() {
-      expect(ctrl.phones.length).toBe(3);
+    it('should create a `phones` property with 2 phones fetched with `$http`', function() {
+      expect(ctrl.phones).toBeUndefined();
+
+      $httpBackend.flush();
+      expect(ctrl.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
     });
 
-    it('should set a default value for the `orderProp` model', function() {
+    it('should set a default value for the `orderProp` property', function() {
       expect(ctrl.orderProp).toBe('age');
     });
 

e2e-tests/scenarios.js

@@ -15,14 +15,14 @@ describe('PhoneCat Application', function() {
       var phoneList = element.all(by.repeater('phone in $ctrl.phones'));
       var query = element(by.model('$ctrl.query'));
 
-      expect(phoneList.count()).toBe(3);
+      expect(phoneList.count()).toBe(20);
 
       query.sendKeys('nexus');
       expect(phoneList.count()).toBe(1);
 
       query.clear();
       query.sendKeys('motorola');
-      expect(phoneList.count()).toBe(2);
+      expect(phoneList.count()).toBe(8);
     });
 
     it('should be possible to control phone order via the drop-down menu', function() {