step-11 custom service and $resource

- Replaced [$http] with [$resource] - Created a custom Phone service that represents the $resource client
angular · Jan 20, 2016 · 3a69cd6 · 3a69cd6
1 parent 74fca65
commit 3a69cd6
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 21 deletions.
diff --git a/app/index.html b/app/index.html
@@ -7,9 +7,11 @@
   <link rel="stylesheet" href="css/app.css">
   <script src="bower_components/angular/angular.js"></script>
   <script src="bower_components/angular-route/angular-route.js"></script>
+  <script src="bower_components/angular-resource/angular-resource.js"></script>
   <script src="js/app.js"></script>
   <script src="js/controllers.js"></script>
   <script src="js/filters.js"></script>
+  <script src="js/services.js"></script>
 </head>
 <body>
 

diff --git a/app/js/app.js b/app/js/app.js
@@ -5,7 +5,8 @@
 var phonecatApp = angular.module('phonecatApp', [
   'ngRoute',
   'phonecatControllers',
-  'phonecatFilters'
+  'phonecatFilters',
+  'phonecatServices'
 ]);
 
 phonecatApp.config(['$routeProvider',

diff --git a/app/js/controllers.js b/app/js/controllers.js
@@ -4,20 +4,16 @@
 
 var phonecatControllers = angular.module('phonecatControllers', []);
 
-phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
-  function($scope, $http) {
-    $http.get('phones/phones.json').success(function(data) {
-      $scope.phones = data;
-    });
-
+phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',
+  function($scope, Phone) {
+    $scope.phones = Phone.query();
     $scope.orderProp = 'age';
   }]);
 
-phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
-  function($scope, $routeParams, $http) {
-    $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
-      $scope.phone = data;
-      $scope.mainImageUrl = data.images[0];
+phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',
+  function($scope, $routeParams, Phone) {
+    $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
+      $scope.mainImageUrl = phone.images[0];
     });
 
     $scope.setImage = function(imageUrl) {

diff --git a/app/js/services.js b/app/js/services.js
@@ -2,3 +2,11 @@
 
 /* Services */
 
+var phonecatServices = angular.module('phonecatServices', ['ngResource']);
+
+phonecatServices.factory('Phone', ['$resource',
+  function($resource){
+    return $resource('phones/:phoneId.json', {}, {
+      query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
+    });
+  }]);
diff --git a/bower.json b/bower.json
@@ -10,6 +10,7 @@
     "angular-mocks": "1.4.x",
     "jquery": "~2.1.1",
     "bootstrap": "~3.1.1",
-    "angular-route": "1.4.x"
+    "angular-route": "1.4.x",
+    "angular-resource": "1.4.x"
   }
 }
diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -6,6 +6,7 @@ module.exports = function(config){
     files : [
       'app/bower_components/angular/angular.js',
       'app/bower_components/angular-route/angular-route.js',
+      'app/bower_components/angular-resource/angular-resource.js',
       'app/bower_components/angular-mocks/angular-mocks.js',
       'app/js/**/*.js',
       'test/unit/**/*.js'

diff --git a/test/unit/controllersSpec.js b/test/unit/controllersSpec.js
@@ -3,7 +3,16 @@
 /* jasmine specs for controllers go here */
 describe('PhoneCat controllers', function() {
 
+  beforeEach(function(){
+    this.addMatchers({
+      toEqualData: function(expected) {
+        return angular.equals(this.actual, expected);
+      }
+    });
+  });
+
   beforeEach(module('phonecatApp'));
+  beforeEach(module('phonecatServices'));
 
   describe('PhoneListCtrl', function(){
     var scope, ctrl, $httpBackend;
@@ -19,11 +28,11 @@ describe('PhoneCat controllers', function() {
 
 
     it('should create "phones" model with 2 phones fetched from xhr', function() {
-      expect(scope.phones).toBeUndefined();
+      expect(scope.phones).toEqualData([]);
       $httpBackend.flush();
 
-      expect(scope.phones).toEqual([{name: 'Nexus S'},
-                                   {name: 'Motorola DROID'}]);
+      expect(scope.phones).toEqualData(
+          [{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
     });
 
 
@@ -54,10 +63,10 @@ describe('PhoneCat controllers', function() {
 
 
     it('should fetch phone detail', function() {
-      expect(scope.phone).toBeUndefined();
+      expect(scope.phone).toEqualData({});
       $httpBackend.flush();
 
-      expect(scope.phone).toEqual(xyzPhoneData());
+      expect(scope.phone).toEqualData(xyzPhoneData());
     });
   });
 });
diff --git a/test/unit/servicesSpec.js b/test/unit/servicesSpec.js
@@ -1,7 +1,12 @@
 'use strict';
 
-/* jasmine specs for services go here */
-
 describe('service', function() {
 
-});
+  // load modules
+  beforeEach(module('phonecatApp'));
+
+  // Test service availability
+  it('check the existence of Phone factory', inject(function(Phone) {
+      expect(Phone).toBeDefined();
+    }));
+});