Agrega paso 11 de la aplicación

- Reemplaza [$http] por [$resource]. - Crea un servicio personalizado `Telefono` que representa el cliente `$resource`.
GuzmanPI · Aug 30, 2014 · 9a4e852 · 9a4e852
1 parent 88e63f6
commit 9a4e852
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 41 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/ap.js"></script>
   <script src="js/controladores.js"></script>
   <script src="js/filtros.js"></script>
+  <script src="js/servicios.js"></script>
 </head>
 <body>
 

diff --git a/app/js/ap.js b/app/js/ap.js
@@ -5,7 +5,8 @@
 var phonecatAp = angular.module('phonecatAp', [
   'ngRoute',
   'phonecatControladores',
-  'phonecatFiltros'
+  'phonecatFiltros',
+  'phonecatServicios'
 ]);
 
 phonecatAp.config(['$routeProvider',

diff --git a/app/js/controladores.js b/app/js/controladores.js
@@ -4,20 +4,17 @@
 
 var phonecatControladores = angular.module('phonecatControladores', []);
 
-phonecatControladores.controller('ListaTelefonosCtrl', ['$scope', '$http',
-  function($scope, $http) {
-    $http.get('phones/phones.json').success(function(data) {
-      $scope.telefonos = data;
-    });
+phonecatControladores.controller('ListaTelefonosCtrl', ['$scope', 'Telefono',
+  function($scope, Telefono) {
+    $scope.telefonos = Telefono.query();
 
     $scope.ordenProp = 'age';
   }]);
 
-phonecatControladores.controller('DetallesTelefonoCtrl', ['$scope', '$routeParams', '$http',
-  function($scope, $routeParams, $http) {
-    $http.get('phones/' + $routeParams.idTelefono + '.json').success(function(data) {
-      $scope.telefono = data;
-      $scope.urlImagenPrincipal = data.images[0];
+phonecatControladores.controller('DetallesTelefonoCtrl', ['$scope', '$routeParams', 'Telefono',
+  function($scope, $routeParams, Telefono) {
+    $scope.telefono = Telefono.get({idTelefono: $routeParams.idTelefono}, function(telefono) {
+      $scope.urlImagenPrincipal = telefono.images[0];
     });
 
     $scope.setImagen = function(urlImagen) {

diff --git a/app/js/servicios.js b/app/js/servicios.js
@@ -2,3 +2,13 @@
 
 /* Servicios */
 
+var phonecatServicios = angular.module('phonecatServicios', ['ngResource']);
+
+phonecatServicios.factory('Telefono', ['$resource',
+  function($resource){
+    return $resource('phones/:idTelefono.json', {}, {
+      query: {method:'GET', params:{idTelefono:'phones'}, isArray:true}
+    });
+  }]);
+
+
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/controladoresSpec.js b/test/unit/controladoresSpec.js
@@ -1,37 +1,50 @@
 'use strict';
 
 /* jasmine specs for controllers go here */
+describe('controladores PhoneCat', function() {
 
-describe('controllers', function() {
-  var scope, ctrl, $httpBackend;
+  beforeEach(function(){
+    this.addMatchers({
+      toEqualData: function(expected) {
+        return angular.equals(this.actual, expected);
+      }
+    });
+  });
 
   beforeEach(module('phonecatAp'));
-  beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
-    $httpBackend = _$httpBackend_;
-    $httpBackend.expectGET('phones/phones.json').
-      respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+  beforeEach(module('phonecatServicios'));
+
+  describe('ListaTelefonosCtrl', function(){
+    var scope, ctrl, $httpBackend;
+
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json').
+        respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
 
-    scope = $rootScope.$new();
-    ctrl = $controller('ListaTelefonosCtrl', {$scope: scope});
-  }));
+      scope = $rootScope.$new();
+      ctrl = $controller('ListaTelefonosCtrl', {$scope: scope});
+    }));
 
 
-  it('debe crear el modelo "telefonos" con 2 teléfonos traidos de xhr', function() {
-    expect(scope.telefonos).toBeUndefined();
-    $httpBackend.flush();
+    it('debe crear el modelo "telefonos" con 2 telefonos de xhr', function() {
+      expect(scope.telefonos).toEqualData([]);
+      $httpBackend.flush();
 
-    expect(scope.telefonos).toEqual([{name: 'Nexus S'},
-      {name: 'Motorola DROID'}]);
-  });
+      expect(scope.telefonos).toEqualData(
+        [{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
+    });
 
 
-  it('debe setear el valor por defecto del modelo ordenProp', function() {
-    expect(scope.ordenProp).toBe('age');
+    it('debe setear el valor por defecto del modelo orderProp', function() {
+      expect(scope.ordenProp).toBe('age');
+    });
   });
 
+
   describe('DetallesTelefonoCtrl', function(){
     var scope, $httpBackend, ctrl,
-      datosTelefonoXyz = function() {
+      xyzPhoneData = function() {
         return {
           name: 'telefono xyz',
           images: ['image/url1.png', 'image/url2.png']
@@ -41,21 +54,11 @@ describe('controllers', function() {
 
     beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
       $httpBackend = _$httpBackend_;
-      $httpBackend.expectGET('phones/xyz.json').respond(datosTelefonoXyz());
+      $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
 
-      $routeParams.idTelefono = 'xyz';
+      $routeParams.phoneId = 'xyz';
       scope = $rootScope.$new();
       ctrl = $controller('DetallesTelefonoCtrl', {$scope: scope});
     }));
-
-
-    it('should fetch phone detail', function() {
-      expect(scope.telefono).toBeUndefined();
-      $httpBackend.flush();
-
-      expect(scope.telefono).toEqual(datosTelefonoXyz());
-    });
   });
-
-
 });