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ágina usando las rutas
• Quitar de las páginas la cabera y el pie ya que ahora solo 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

Ahora el formato de los datos JSON es el siguiente:

{
  "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": ""
  }
}

Hemos hecho este cambio ya que ahora se podrán obtener los datos de un seguro concreto usando la propiedad idSeguro para obtenerlo.

Ahora en vez de tener un solo fichero llamado datos.json tenemos 8 ficheros distintos llamados:

• datos1.json
• datos2.json
• datos3.json
• Etc.

Eso nos permite que desde el método get del servicio remoteResource acepte como argumento el idSeguro y podemos ya leer solo los datos que queremos.

El método get ahora queda de la siguiente forma

  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;
    
  }

• Línea 1: Ahora aceptamos el parámetro idSeguro
• Línea 7: Al obtener los datos , obtenemos del fichero que tiene solo los datos que queremos.

Al añadir la rutas, la página index.html solo 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.

<a href="#/seguro/listado" >Listado de seguros medicos</a>

A la página listado.html se accede mediante la ruta /seguro/listado.

Ahora vamos a añadir las rutas para poder navegar a las 3 páginas:

• main.html
• listado.html
• detalle.html

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: '/'
  });   
 
}]);

Vemos creado las 3 rutas para las 3 páginas.

El path de la ruta de listado.html se llamada /seguro/listado en vez de únicamente /listado. Se ha hecho este cambio ya que así las rutas están mucho mas organizadas. ¿Que pasaría si tuviéramos mas 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. Esto nos permitirá que al ir a la página ya solo se muestren los datos del seguro definido en el parámetro idSeguro en vez de el 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

  <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js'></script>

• Hacer que el módulo de la aplicación dependa del módulo ngRoute

var app = angular.module("app", ['ngRoute']);

Ahora ya no es necesario incluir la cabecera ni el pie en listado.html ni en detalle.html ya que ahora siempre 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 cabera y el pie.

<!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>

• Línea 15: Hemos añadido la directiva ng-view para que aquí se muestren las otras páginas.

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 solo hemos añadido un link con la ruta correspondiente a detalle.html.

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>

• 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. Esto es lo que permite que al pinchar se vaya a la página de detalle.html y se vean todos los datos del seguro.

Para evitar que al aparecer la página de listado un instante después aparezca la tabla con los datos, vemos a obtener los datos en el resolve de la ruta.

Para ello hemos modificado la definición de la ruta de la siguiente forma:

  $routeProvider.when('/seguro/listado', {
    templateUrl: "listado.html",
    controller: "ListadoSeguroController",
    resolve: {
      seguros:['remoteResource',function(remoteResource) {
        return remoteResource.list();
      }]
    }
  });

• Línea 4: Se añadir 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 solo hay que inyectar seguros y ya tendremos los datos.

app.controller("ListadoSeguroController", ['$scope', 'seguros',function($scope, seguros) {
    $scope.seguros = seguros;
}]);

• 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.

Para evitar que al aparecer la página de detalle , un instante después aparezcan los datos en los campos, vemos a obtener los datos en el resolve de la ruta.

Para ello hemos modificado la definición de la ruta de la siguiente forma:

  $routeProvider.when('/seguro/edit/:idSeguro', {
    templateUrl: "detalle.html",
    controller: "DetalleSeguroController",
    resolve: {
      seguro:['remoteResource','$route',function(remoteResource,$route) {
        return remoteResource.get($route.current.params.idSeguro);
      }]
    }
  });

Línea 4: Se añadir 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 solo el seguro que queremos.

Ahora en el controlador ya no es necesario que llamemos a remoteResource.get() sino que solo hay que inyectar seguro y ya tendremos los datos.

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;


}]);

Como ya tenemos el objeto con todos los datos en cuanto se muestre la página ya se verá en el formulario toda la información.