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]

Author: IgorMinar

app/js/controllers.js

@@ -4,18 +4,10 @@
 
 var phonecatApp = angular.module('phonecatApp', []);
 
-phonecatApp.controller('PhoneListCtrl', function($scope) {
-  $scope.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}
-  ];
+phonecatApp.controller('PhoneListCtrl', function($scope, $http) {
+  $http.get('phones/phones.json').success(function(data) {
+    $scope.phones = data;
+  });
 
   $scope.orderProp = 'age';
 });

test/e2e/scenarios.js

@@ -12,13 +12,13 @@ describe('PhoneCat App', function() {
 
 
     it('should filter the phone list as user types into the search box', function() {
-      expect(repeater('.phones li').count()).toBe(3);
+      expect(repeater('.phones li').count()).toBe(20);
 
       input('query').enter('nexus');
       expect(repeater('.phones li').count()).toBe(1);
 
       input('query').enter('motorola');
-      expect(repeater('.phones li').count()).toBe(2);
+      expect(repeater('.phones li').count()).toBe(8);
     });
 
 

test/unit/controllersSpec.js

@@ -4,16 +4,28 @@
 describe('PhoneCat controllers', function() {
 
   describe('PhoneListCtrl', function(){
-    var scope, ctrl;
+    var scope, ctrl, $httpBackend;
 
     beforeEach(module('phonecatApp'));
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json').
+          respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
 
-    beforeEach(inject(function($controller) {
-      scope = {};
-      ctrl = $controller('PhoneListCtrl', {$scope:scope});
+      scope = $rootScope.$new();
+      ctrl = $controller('PhoneListCtrl', {$scope: scope});
     }));
 
 
+    it('should create "phones" model with 2 phones fetched from xhr', function() {
+      expect(scope.phones).toBeUndefined();
+      $httpBackend.flush();
+
+      expect(scope.phones).toEqual([{name: 'Nexus S'},
+                                   {name: 'Motorola DROID'}]);
+    });
+
+
     it('should set the default value of orderProp model', function() {
       expect(scope.orderProp).toBe('age');
     });