Diferencias

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

--- unidades:07_rutas:05_ejemploseguro [2014/08/27 09:38] – admin
+++ unidades:07_rutas:05_ejemploseguro [2014/09/16 19:33] (actual) – admin
@@ Línea 1: / Línea 1: @@
-====== Ejemplo de rutas ======
+====== 7.5 Ejemplo de rutas ======
+En este tema retornamos el ejemplo del seguro médico para añadir el servicio de rutas y de paso hacer otros cambios que ya podemos hacer.
+La lista de modificaciones a realizar es la siguiente:
+  * Añadir a los datos JSON otra propiedad llamada ''idSeguro''.
+  * Hacer que el método ''get'' del servicio ''remoteResource'' acepte como argumento el ''idSeguro''.
+  * Nueva página ''main.html''
+  * Navegar entre páginas usando las rutas.
+  * Quitar de las páginas la cabecera y el pie ya que ahora sólo están en la página ''index.html''.
+  * Permitir ir desde el lista de seguros al detalle de cada seguro.
+  * Cargar los datos del listado desde el ''resolve'' y usarlos desde el controlador.
+  * Cargar los datos del detalle desde el ''resolve'' y usarlos desde el controlador.
+===== Añadir a los datos JSON otra propiedad llamada idSeguro =====
+Ahora el formato de los datos JSON es el siguiente:
+<sxh js>
+{
+  "idSeguro": 3,
+  "nif": "29069345J",
+  "nombre": "Jose",
+  "ape1": "Aguado",
+  "edad": 56,
+  "sexo": "H",
+  "casado": true,
+  "numHijos": 2,
+  "embarazada": false,
+  "coberturas": {
+    "oftalmologia": true,
+    "dental": true,
+    "fecundacionInVitro": false
+  },
+  "enfermedades": {
+    "corazon": true,
+    "estomacal": true,
+    "rinyones": true,
+    "alergia": false,
+    "nombreAlergia": ""
+  }
+}
+</sxh>
+Hemos hecho este cambio ya que ahora se podrán obtener los datos de un seguro concreto usando la propiedad ''idSeguro'' para obtenerlo.
+===== Hacer que el método get del servicio remoteResource acepte como argumento el idSeguro =====
+Ahora, en vez de tener un solo fichero llamado ''datos.json'' tenemos 8 ficheros distintos llamados:
+  * ''datos1.json''
+  * ''datos2.json''
+  * ''datos3.json''
+  * Etc.
+Éso nos permite que desde el método ''get'' del servicio ''remoteResource'' acepte como argumento el ''idSeguro'' y ya podemos leer sólo los datos que queremos.
+El método ''get'' ahora queda de la siguiente forma
+<sxh js;highlight: [1,7]>
+  this.get = function(idSeguro) {
+    var defered=$q.defer();
+    var promise=defered.promise;
+    $http({
+      method: 'GET',
+      url: baseUrl + '/datos' + idSeguro + '.json'
+    }).success(function(data, status, headers, config) {
+      defered.resolve(data);
+    }).error(function(data, status, headers, config) {
+      defered.reject(status);
+    });
+    return promise;
+  }
+</sxh>
+  * Línea 1: Ahora aceptamos el parámetro ''idSeguro''
+  * Línea 7: Al obtener los datos , obtenemos del fichero que los tiene sólo los datos que queremos.
+<note tip>
+Recuerda que la forma de obtener los datos por ahora es temporal. Ya veremos más adelante REST y la parte servidora y cambiaremos la parte de la URL del ''$htpp''
+</note>
+===== Nueva página main.html =====
+Al añadir la rutas, la página ''index.html'' sólo contiene las partes comunes a todas las páginas, como la cabecera y el pie. Por ello es necesario añadir una nueva página llamada ''main.html'' que será la que se muestre inicialmente.
+El contenido de esta página es solamente el enlace para mostrar ''listado.html''.
+<sxh html;title:main.html>
+<a href="#/seguro/listado" >Listado de seguros medicos</a>
+</sxh>
+A la página ''listado.html'' se accede mediante la ruta ''/seguro/listado''.
+===== Navegar entre páginas usando las rutas =====
+Ahora vamos a añadir las rutas para poder navegar a las 3 páginas:
+  * ''main.html''
+  * ''listado.html''
+  * ''detalle.html''
+<sxh js>
+app.config(['$routeProvider',function($routeProvider) {
+  $routeProvider.when('/', {
+    templateUrl: "main.html",
+    controller: "MainController"
+  });
+  $routeProvider.when('/seguro/listado', {
+    templateUrl: "listado.html",
+    controller: "ListadoSeguroController"
+  });
+  $routeProvider.when('/seguro/edit/:idSeguro', {
+    templateUrl: "detalle.html",
+    controller: "DetalleSeguroController"
+  });
+  $routeProvider.otherwise({
+        redirectTo: '/'
+  });
+}]);
+</sxh>
+Hemos creado las 3 rutas para las 3 páginas.
+El path de la ruta de ''listado.html'' se llamará ''/seguro/listado'' en vez de únicamente ''/listado''. Hemos hecho este cambio porque así las rutas están mucho más organizadas. ¿Qué pasaría si tuviéramos más de un listado de otras entidades? Por ello es mejor añadir delante ''/seguro''. Lo mismo pasa con el path de la ruta de ''detalle.html''.
+También en el path de la ruta de ''detalle.html'' se ha añadido el parámetro ''idSeguro''. Ésto nos permitirá que, al ir a la página sólo se muestren los datos del seguro definido en el parámetro ''idSeguro'' en vez de él mismo, como se hacía hasta ahora.
+Al añadir las rutas hemos tenido que hacer otros 2 cambios:
+  * Incluir el fichero JavaScript ''angular-route.min.js'' en ''index.html''
+<sxh html>
+  <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js'></script>
+</sxh>
+  * Hacer que el módulo de la aplicación dependa del módulo ''ngRoute''
+<sxh js>
+var app = angular.module("app", ['ngRoute']);
+</sxh>
+===== Quitar de las páginas la cabera y el pie ya que ahora sólo están en la página index.html. =====
+Ahora ya no es necesario incluir la cabecera ni el pie en ''listado.html'' ni en ''detalle.html'' puesto que ahora se muestran dentro de ''index.html''
+En ''index.html'' hemos añadido la directiva ''ng-view'' para indicar que las páginas se muestren entre la cabecera y el pie.
+<sxh html;title:index.html;highlight: [15]>
+<!DOCTYPE html>
+<html ng-app="app">
+<head>
+  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
+  <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js'></script>
+  <script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>
+  <script src="script.js"></script>
+</head>
+<body ng-controller="MainController">
+  <ng-include src="'cabecera.html'"></ng-include>
+  <div ng-view></div>
+  <ng-include src="'pie.html'"></ng-include>
+</body>
+</html>
+</sxh>
+  * Línea 15: Hemos añadido la directiva ''ng-view'' para que aquí se muestren las otras páginas.
+===== Permitir ir desde el lista de seguros al detalle de cada seguro =====
+Como ya tenemos rutas y parámetros, desde la página de ''listado.html'' ahora se podrá navegar a ''detalle.html'' para ver el detalle de cada uno de los seguros.
+Para ello sólo hemos añadido un link con la ruta correspondiente a ''detalle.html''.
+<sxh html;highlight: [20]>
+Filtrar por apellido:<input ng-model="filtro.ape1" >
+<table>
+  <thead>
+    <tr>
+      <th>NIF</th>
+      <th>Nombre</th>
+      <th>Apellido</th>
+      <th>Sexo</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>
+    </tr>
+  </tbody>
+</table>
+</sxh>
+  * Línea 20: El link ahora apunta a la ruta ''/seguro/edit/:idSeguro''. Y fíjate que hay que incluir la almohadilla "#" al inicio de la ruta. Ésto es lo que permite que al pinchar se vaya a la página de ''detalle.html'' y se vean todos los datos del seguro.
+===== Cargar los datos del listado desde el ''resolve'' y usarlos desde el controlador =====
+Para evitar que al aparecer la página de listado un instante después aparezca la tabla con los datos, vamos a obtener los datos en el ''resolve'' de la ruta.
+Para ello hemos modificado la definición de la ruta de la siguiente forma:
+<sxh js;highlight: [4,5,6]>
+  $routeProvider.when('/seguro/listado', {
+    templateUrl: "listado.html",
+    controller: "ListadoSeguroController",
+    resolve: {
+      seguros:['remoteResource',function(remoteResource) {
+        return remoteResource.list();
+      }]
+    }
+  });
+</sxh>
+  * Línea 4: Se añade la propiedad ''resolve'' que contiene el objeto con los datos a //resolver//.
+  * Línea 5: Se inyecta el servicio ''remoteResource'' el cual necesitamos para obtener los datos.
+  * Línea 6: Aquí es donde se llama para obtener los datos y se retorna la promesa.
+Ahora en el controlador ya no es necesario que llamemos a ''remoteResource.list()'' sino que solamente hay que inyectar ''seguros'' y ya tendremos los datos.
+<sxh js;highlight: [1,2]>
+app.controller("ListadoSeguroController", ['$scope', 'seguros',function($scope, seguros) {
+    $scope.seguros = seguros;
+}]);
+</sxh>
+  * Línea 1: Inyectamos el //servicio// ''seguros'' que contiene el array con todos los datos que se obtuvieron al llamar a ''remoteResource.list()''
+  * Línea 2: Ahora simplemente los guardamos en el ''$scope'' y se mostrarán en la tabla HTML.
+Como ya tenemos el array con todos los datos, en cuanto se muestre la página ya se verá la tabla con toda la información.
+<note tip>
+Compara ahora este ejemplo del seguro con el de la unidad anterior y verás la diferencia.
+</note>
+===== Cargar los datos del detalle desde el ''resolve'' y usarlos desde el controlador =====
+Para evitar que al aparecer la página de detalle , aparezcan los datos en los campos un instante después, vamos a obtener los datos en el resolve de la ruta.
+Para ello hemos modificado la definición de la ruta de la siguiente forma:
+<sxh js>
+  $routeProvider.when('/seguro/edit/:idSeguro', {
+    templateUrl: "detalle.html",
+    controller: "DetalleSeguroController",
+    resolve: {
+      seguro:['remoteResource','$route',function(remoteResource,$route) {
+        return remoteResource.get($route.current.params.idSeguro);
+      }]
+    }
+  });
+</sxh>
+Línea 4: Se añade la propiedad ''resolve'' que contiene el objeto con los datos a resolver.
+Línea 5: Se inyecta el servicio ''remoteResource'' el cual necesitamos para obtener los datos. También se inyecta el servicio de ''$route'' para poder obtener el valor del parámetro ''idSeguro'' ya que lo necesitamos ahora para poder obtener únicamente el seguro indicado en ''idSeguro''.
+Línea 6: Aquí es donde se llama para obtener los datos y se retorna la promesa.Vemos que al método ''get'' le pasamos el ''idSeguro'' para obtener sólo el seguro que queremos.
+Ahora en el controlador ya no es necesario que llamemos a remoteResource.get() sino que sólo hay que inyectar ''seguro'' y ya tendremos los datos.
+<sxh js;highlight: [1,40]>
+app.controller("DetalleSeguroController", ['$scope', 'seguro',function($scope, seguro) {
+    $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.seguro = seguro;
+}]);
+</sxh>
+Línea 1: Inyectamos el //servicio// ''seguro'' que contiene los datos que se obtuvieron al llamar a ''remoteResource.get(idSeguro)''
+Línea 40: Ahora simplemente los guardamos en el $scope y se mostrarán en el formulario HTML.
+Como ya tenemos el objeto con todos los datos, en cuanto se muestre la página ya se verá toda la información en el formulario .
+<note important>Compara ahora este ejemplo del seguro con el de la unidad anterior y verás la diferencia.</note>
 ===== Ejemplo =====
+<note important>Como este ejemplo necesita ver cómo cambia la URL del navegador , es mejor abrir en una nueva página el [[http://run.plnkr.co/plunks/JXPKf3|ejemplo]].</note>
 {{url>http://embed.plnkr.co/JXPKf3}}