Diferencias

Muestra las diferencias entre dos versiones de la página.

--- unidades:10_servidor:07_remoteresource [2014/09/03 19:23] – [Añadir un nuevo seguro médico] admin
+++ unidades:10_servidor:07_remoteresource [2014/09/04 15:01] (actual) – borrado admin
@@ Línea 1: / Línea 1: @@
-====== 10.7 remoteResource ======
-Ya tenemos un API REST funcionando en el servidor, así que vamos a volver a la parte de AngularJS para por fin tener una aplicación funcionando capaz de hacer un CRUD.
-===== remoteResource =====
-Lo primero es acabar el servicio ''remoteResource'' para que haga uso del API REST que hemos creado.El servicio se basa en la función ''RemoteResource'' que es la que tiene toda la funcionalidad , la hemos modificado para que los 2 métodos que ya hay hagan uso del API REST.
-<sxh js;highlight: [8,12,13,15,29,33,34,36]>
-function RemoteResource($http, $q, baseUrl) {
-    this.get = function(idSeguro) {
-        var defered = $q.defer();
-        var promise = defered.promise;
-        $http({
-            method: 'GET',
-            url: baseUrl + '/api/SeguroMedico/' + idSeguro
-        }).success(function(data, status, headers, config) {
-            defered.resolve(data);
-        }).error(function(data, status, headers, config) {
-            if (status === 400) {
-                defered.reject(data);
-            } else {
-                throw new Error("Fallo obtener los datos:" + status + "\n" + data);
-            }
-        });
-        return promise;
-    };
-    this.list = function() {
-        var defered = $q.defer();
-        var promise = defered.promise;
-        $http({
-            method: 'GET',
-            url: baseUrl + '/api/SeguroMedico'
-        }).success(function(data, status, headers, config) {
-            defered.resolve(data);
-        }).error(function(data, status, headers, config) {
-            if (status === 400) {
-                defered.reject(data);
-            } else {
-                throw new Error("Fallo obtener los datos:" + status + "\n" + data);
-            }
-        });
-        return promise;
-    };
-}
-</sxh>
-  * Linea 31: Hemos puesto la URL correcta para acceder al servidor, incluyendo el valor del ''idSeguro'' y así obtener solo un seguro médico.
-  * Línea 12: Vamos ahora a tratar de forma distinta si se ha retornado un 400 o cualquier otra cosa.
-  * Línea 13: Si se ha retornado un 400, lo que hay en data es un array de objetos ''BussinessMessage'' y es lo que retornamos como resultado de rechazar la promesa. Notar que ahora hemos cambiado el interzaf de la promesa. Cuando es rechazada se retorna un array de objetos ''BussinessMessage''.
-  * Línea 15: En caso de que no sea un 400, será algún error del servidor, así que lanzamos un error de JavaScript ya que lo que ocurrió en el servidor fue un error así que aquí seguimos tratándolo como un error.
-  * Linea 29: Hemos puesto la URL correcta para acceder al servidor para poder obtener todos los seguros médicos.
-  * Línea 33: Vamos ahora a tratar de forma distinta si se ha retornado un 400 o cualquier otra cosa.
-  * Línea 34: Si se ha retornado un 400, lo que hay en data es un array de objetos ''BussinessMessage'' y es lo que retornamos como resultado de rechazar la promesa. Notar que ahora hemos cambiado el interzaf de la promesa. Cuando es rechazada se retorna un array de objetos ''BussinessMessage''.
-  * Línea 36: En caso de que no sea un 400, será algún error del servidor, así que lanzamos un error de JavaScript ya que lo que ocurrió en el servidor fue un error así que aquí seguimos tratándolo como un error.
-Como vemos los cambios han sido mínimos, solo la nueva URL y la gestión del error ''400 Bad Request'' que ahora es lo que hace que se rechace la promesa.
-Pasemos ahora a ver el resto de los métodos. Son casi todos iguales y solo cambia la URL y los datos que se envían.
-<sxh js;highlight: [8,22,29]>
-    this.insert = function(seguroMedico) {
-        var defered = $q.defer();
-        var promise = defered.promise;
-        $http({
-            method: 'POST',
-            url: baseUrl + '/api/SeguroMedico',
-            data: seguroMedico
-        }).success(function(data, status, headers, config) {
-            defered.resolve(data);
-        }).error(function(data, status, headers, config) {
-            if (status === 400) {
-                defered.reject(data);
-            } else {
-                throw new Error("Fallo obtener los datos:" + status + "\n" + data);
-            }
-        });
-        return promise;
-    };
-    this.update = function(idSeguro, seguroMedico) {
-        var defered = $q.defer();
-        var promise = defered.promise;
-        $http({
-            method: 'PUT',
-            url: baseUrl + '/api/SeguroMedico/' + idSeguro,
-            data: seguroMedico
-        }).success(function(data, status, headers, config) {
-            defered.resolve(data);
-        }).error(function(data, status, headers, config) {
-            if (status === 400) {
-                defered.reject(data);
-            } else {
-                throw new Error("Fallo obtener los datos:" + status + "\n" + data);
-            }
-        });
-        return promise;
-    };
-    this.delete = function(idSeguro) {
-        var defered = $q.defer();
-        var promise = defered.promise;
-        $http({
-            method: 'DELETE',
-            url: baseUrl + '/api/SeguroMedico/' + idSeguro
-        }).success(function(data, status, headers, config) {
-            defered.resolve(data);
-        }).error(function(data, status, headers, config) {
-            if (status === 400) {
-                defered.reject(data);
-            } else {
-                throw new Error("Fallo obtener los datos:" + status + "\n" + data);
-            }
-        });
-        return promise;
-    };
-</sxh>
-  * Líneas 8 y 29: Se usa la propiedad ''data''. La propiedad ''data'' contiene el objeto JavaScript que se transforma en un String JSON y se envía en la petición HTTP en el cuerpo de la misma. Esta String JSON es el que posteriormente se obtiene desde el servidor en Java con la anotación [[unidades:10_servidor:06_controlador#accediendo_al_json_de_entrada|@RequestBody]].
-  * Línea 22: Hemos optado por pasar el parámetro ''idSeguro'' aunque también se podría obtener del mismo objeto JavaScript ''seguroMedico'' mediante ''seguroMedico.idSeguro''. Se ha hecho así para destacar en el update se envía el ''idSeguro'' tanto en la URL como en el propio objeto.
-<note tip>
-Esta clase con poco de trabajo la podríamos hacer genérica y poder reusarla en otros proyectos , sin embargo en vez de usar esta clase existen en AngularJS dos alternativas a crearte tu propia clase:
-  * [[https://docs.angularjs.org/api/ngResource/service/$resource|$resource]]
-  * [[https://github.com/mgonto/restangular|Restangular]]
-Aunque nuestra clase funcione perfectamente, estas 2 últimas disponen de muchas mas funcionalidades con lo que deberías usarse en proyectos reales y decir que el equipo de AngularJS está trabajando en mejorar aun mas su clase [[https://docs.angularjs.org/api/ngResource/service/$resource|$resource]].
-Aun así nuestra clase ''remoteResource'' ha cumplido perfectamente su papel para entender como funciona todo.
-</note>
-===== La aplicación =====
-Como ya tenemos acabado el servicio ''remoteResource'' ya podemos modificar la aplicación para poder hacer las siguientes operaciones:
-  * Borrar un seguro médico
-  * Actualizar los datos de un seguro médico
-  * Añadir un nuevo seguro médico
-==== Borrar seguro médico ====
-Para borrar un seguro médico vamos a añadir un botón de borrado en la tabla en la que se muestran todos los seguros médicos. Estebotón llamará a una función del ''$scope'' que es la que realizará la tarea.
-<sxh html;highlight: [8,29]>
-<table>
-  <thead>
-    <tr>
-      <th>NIF</th>
-      <th>Nombre</th>
-      <th>Apellido</th>
-      <th>Sexo</th>
-      <th>Accion</th>
-    </tr>
-  </thead>
-  <tfoot>
-    <tr>
-      <td colspan="3">El Nº de seguros medicos es:</td>
-      <td ng-bind="seguros.length"></td>
-    </tr>
-  </tfoot>
-  <tbody>
-    <tr ng-repeat="seguro in seguros| filteri18n:{ape1:filtro.ape1}" ng-style="{color:($odd?'red':'green')}">
-      <td><a ng-href="#/seguro/edit/{{seguro.idSeguro}}">{{seguro.nif}}</a></td>
-      <td>{{seguro.nombre}}</td>
-      <td>{{seguro.ape1}}</td>
-      <td ng-switch on="seguro.sexo">
-        <span ng-switch-when="H">Hombre</span>
-        <span ng-switch-when="M">Mujer</span>
-        <span ng-switch-when=""></span>
-        <span ng-switch-default>Desconocido</span>
-      </td>
-      <td>
-           <button ng-click="borrar(seguro.idSeguro)">Borrar</button>
-      </td>
-    </tr>
-  </tbody>
-</table>
-</sxh>
-  * Linea 8: Nueva columna con las acciones a realizar para cada seguro médico
-  * Línea 29: Añadimos u nuevo botón que al pulsarlo llama a la función ''borrar(idSeguro)''. Vemos como al usar la expresión ''seguro.idSeguro'' no es ncesario usar las llaves $${{ %%}} ya que estmaos en una expresión que es de JavaScript.
-El controlador ''ListadoSeguroController'' con el nuevo método ''borrar(idSeguro)'' queda de la siguiente forma:
-<sxh js;highlight: [1,5,6]>
-app.controller("ListadoSeguroController", ['$scope', 'seguros', 'remoteResource', function($scope, seguros, remoteResource) {
-        $scope.seguros = seguros;
-        $scope.borrar = function(idSeguro) {
-            remoteResource.delete(idSeguro).then(function() {
-                remoteResource.list().then(function(seguros) {
-                    $scope.seguros = seguros;
-                });
-            });
-        };
-    }]);
-</sxh>
-  * Linea 1: Inyectamos el servicio ''remoteResource'' ya que nos va a hacer falta.
-  * Línea 5: Llamamos al método ''delete'' para borrar el seguro médico cuya clave sea el parámetro ''idSeguro''.
-  * Línea 6: Si se ha borrado correctamente el seguro médico, volvemos a llamar al método ''list'' para obtenga otra vez los seguros de la base de datos y se refresque la tabla y se vea el seguro borrado en la pantalla. En vez de hacer una llamada a la base de datos podríamos optimizarlo borrando el elemento directamente del array.
-==== Actualizar los datos de un seguro médico ====
-Vamos ahora actualizar los datos de un seguro médico que ya existe. Lo primera que vamos a hacer es cambiar el nombre del controlador ''DetalleSeguroController'' a ''EditSeguroController'' ya que así queda mas claro que vamos a editar los datos del seguro médico.
-Lo único que vamos a hacer es modificar la función ''guardar'' para que finalmente llame a la base de datos.
-<sxh js;highlight: [1,15,21,22]>
-app.controller("EditSeguroController", ['$scope', 'seguro', 'remoteResource', '$location', function($scope, seguro, remoteResource, $location) {
-        $scope.filtro = {
-            ape1: ""
-        };
-        $scope.sexos = [{
-                codSexo: "H",
-                descripcion: "Hombre"
-            }, {
-                codSexo: "M",
-                descripcion: "Mujer"
-            }];
-        $scope.seguro = seguro;
-        $scope.guardar = function() {
-            if ($scope.form.$valid) {
-                remoteResource.update($scope.seguro.idSeguro, $scope.seguro).then(function() {
-                    $location.path("/seguro/listado");
-                });
-            } else {
-                alert("Hay datos inválidos");
-            }
-        };
-    }]);
-</sxh>
-  * Linea 1: Hemos cambiado el nombre del controlador y también inyectamos los servicios [[unidades:07_rutas:02_routeprovider#servicio_location_desde_javascript|$locate]] y ''remoteResource'' que usaremos en el controlador.
-  * Línea 15: Hemos borrado la creación del objeto seguro vacío puesto que ya no nos hace falta. Lo hemos quitado por fin ya que ahora loa vamos a usar al crear un nuevo seguro médico.
-  * Línea 21: Llamamos al servidor para que actualice los datos del seguro médico en la base de datos del servidor.
-  * Línea 22: En caso de que se hayan actualizado los datos  , navegamos a la página del listado de seguros médicos usando el servicio ''$location''.
-==== Añadir un nuevo seguro médico ====
-Para añadir un nuevo seguro es necesario añadir una nueva ruta y crear un nuevo controlador.
-El path de la nueva ruta será ''/seguro/new'' y el controlador se llamará ''NewSeguroController''. Añadiremos el siguiente código debajo de las rutas que habíamos definido en el bloque de configuración:
-<sxh js;highlight: [2]>
-        $routeProvider.when('/seguro/new', {
-            templateUrl: "detalle.html",
-            controller: "NewSeguroController"
-        });
-</sxh>
-  * Línea 2: Hay que destacar que estamos usando la misma página HTML que para la edición. No hay ningún problema en reutilizar una misma página en dos rutas distintas o también reutilizar incluso el controlador.
-El controlador quedará de la siguiente forma:
-<sxh js;highlight: [1,16,41,43,44]>
-app.controller("NewSeguroController", ['$scope', 'remoteResource', '$location', function($scope, remoteResource, $location) {
-        $scope.filtro = {
-            ape1: ""
-        };
-        $scope.sexos = [{
-                codSexo: "H",
-                descripcion: "Hombre"
-            }, {
-                codSexo: "M",
-                descripcion: "Mujer"
-            }];
-        $scope.seguro = {
-            nif: "",
-            nombre: "",
-            ape1: "",
-            edad: undefined,
-            sexo: "",
-            casado: false,
-            numHijos: undefined,
-            embarazada: false,
-            coberturas: {
-                oftalmologia: false,
-                dental: false,
-                fecundacionInVitro: false
-            },
-            enfermedades: {
-                corazon: false,
-                estomacal: false,
-                rinyones: false,
-                alergia: false,
-                nombreAlergia: ""
-            },
-            fechaCreacion: new Date()
-        };
-        $scope.guardar = function() {
-            if ($scope.form.$valid) {
-                remoteResource.insert($scope.seguro).then(function() {
-                    $location.path("/seguro/listado");
-                });
-            } else {
-                alert("Hay datos inválidos");
-            }
-        };
-    }]);
-</sxh>
-Para acceder a esta nueva //página// ((realmente a la ruta)) añadimos un en la en la página del listado de seguros médicos
-<sxh html>
-<a href="#/seguro/new">Nuevo Seguro Medico</a>
-</sxh>
-<note tip>
-Recuerda que al usar los enlaces de HTML se debe poner la almohadilla "#" mientras que usando el servicio [[unidades:07_rutas:02_routeprovider#servicio_location_desde_javascript|$location]] no es necesario.
-</note>
-===== Gestión de errores =====