step-5 XHR and dependency injection

- Replaced the in-memory dataset with data loaded from the server (in
  the form of static phone.json file to make this tutorial backend
  agnostic)
  - The json file is loaded using the [$http] service
- Demonstrate the use of [services][service] and [dependency injection][DI]
  - The [$http] is injected into the controller through [dependency injection][DI]

(Added inline annotation - thanks to @guatebus - closes angular#207)

Author: petebacondarwin

app/js/components.js

@@ -7,18 +7,12 @@ var phonecatApp = angular.module('phonecatApp', []);
 phonecatApp.component('phoneList', {
   controller: 'PhoneListCtrl',
   templateUrl: 'partials/phone-list.html'
-}).controller('PhoneListCtrl', function() {
-  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}
-  ];
-  
-  this.orderProp = 'age';
-});
+}).controller('PhoneListCtrl', ['$http', function ($http) {
+  var ctrl = this;
+
+  $http.get('phones/phones.json').success(function(data) {
+    ctrl.phones = data;
+  });
+
+  ctrl.orderProp = 'age';
+}]);

test/e2e/scenarios.js

@@ -16,14 +16,14 @@ describe('PhoneCat App', 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);
     });
 
 

test/unit/controllersSpec.js

@@ -4,17 +4,24 @@
 describe('PhoneCat controllers', function() {
 
   describe('PhoneListCtrl', function(){
-    var ctrl;
+    var ctrl, $httpBackend;
 
     beforeEach(module('phonecatApp'));
+    beforeEach(inject(function(_$httpBackend_, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json').
+          respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
 
-    beforeEach(inject(function($controller) {
       ctrl = $controller('PhoneListCtrl');
     }));
 
 
-    it('should create "phones" model with 3 phones', function() {
-      expect(ctrl.phones.length).toBe(3);
+    it('should create "phones" model with 2 phones fetched from xhr', function() {
+      expect(ctrl.phones).toBeUndefined();
+      $httpBackend.flush();
+
+      expect(ctrl.phones).toEqual([{name: 'Nexus S'},
+                                   {name: 'Motorola DROID'}]);
     });