¡Esta es una revisión vieja del documento!
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:
idSeguro
get
del servicio remoteResource
acepte como argumento el idSeguro
.main.html
index.html
.resolve
resolve
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
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; }
idSeguro
$htpp
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.