¡Esta es una revisión vieja del documento!


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
  • Cargar los datos del detalle desde el resolve

Añadir a los datos JSON otra propiedad llamada idSeguro

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.

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.

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.

Recuerda que la forma de obtener los datos por ahora es temporal, ya veremos mas adelante REST y la parte servidora y cambiaremos la parte de la URL del $htpp

Nueva página main.html

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.

Ejemplo

Como este ejemplo necesita de ver como cambia la URL del navegador , es mejor abrir en una nueva página el ejemplo.

unidades/07_rutas/05_ejemploseguro.1409128442.txt.gz · Última modificación: 2014/08/27 10:34 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0