Muestra las diferencias entre dos versiones de la página.
unidades:07_rutas:05_ejemploseguro [2014/08/27 10:38] admin [Navegar entre páginas usando las rutas] |
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. | 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: | La lista de modificaciones a realizar es la siguiente: | ||
- | * Añadir a los datos JSON otra propiedad llamada ''idSeguro'' | + | * Añadir a los datos JSON otra propiedad llamada ''idSeguro''. |
* Hacer que el método ''get'' del servicio ''remoteResource'' acepte como argumento el ''idSeguro''. | * Hacer que el método ''get'' del servicio ''remoteResource'' acepte como argumento el ''idSeguro''. | ||
* Nueva página ''main.html'' | * Nueva página ''main.html'' | ||
- | * Navegar entre página usando las rutas | + | * Navegar entre páginas 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''. | + | * 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. | * Permitir ir desde el lista de seguros al detalle de cada seguro. | ||
- | * Cargar los datos del listado desde el ''resolve'' | + | * Cargar los datos del listado desde el ''resolve'' y usarlos desde el controlador. |
- | * Cargar los datos del detalle desde el ''resolve'' | + | * Cargar los datos del detalle desde el ''resolve'' y usarlos desde el controlador. |
Línea 44: | Línea 44: | ||
===== Hacer que el método get del servicio remoteResource acepte como argumento el idSeguro ===== | ===== 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: | + | Ahora, en vez de tener un solo fichero llamado ''datos.json'' tenemos 8 ficheros distintos llamados: |
* ''datos1.json'' | * ''datos1.json'' | ||
* ''datos2.json'' | * ''datos2.json'' | ||
Línea 50: | Línea 50: | ||
* Etc. | * 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. | + | É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 | El método ''get'' ahora queda de la siguiente forma | ||
Línea 72: | Línea 72: | ||
</sxh> | </sxh> | ||
* Línea 1: Ahora aceptamos el parámetro ''idSeguro'' | * 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. | + | * Línea 7: Al obtener los datos , obtenemos del fichero que los tiene sólo los datos que queremos. |
<note tip> | <note tip> | ||
- | 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'' | + | 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> | </note> | ||
===== Nueva página main.html ===== | ===== 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. | + | 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''. | El contenido de esta página es solamente el enlace para mostrar ''listado.html''. | ||
Línea 121: | Línea 121: | ||
</sxh> | </sxh> | ||
- | Vemos creado las 3 rutas para las 3 páginas. | + | Hemos 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''. | + | 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''. 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. | + | 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. |
- | ===== Quitar de las páginas la cabera y el pie ya que ahora solo están en la página index.html. ===== | + | Al añadir las rutas hemos tenido que hacer otros 2 cambios: |
- | 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'' | + | * Incluir el fichero JavaScript ''angular-route.min.js'' en ''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. | + | <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]> | <sxh html;title:index.html;highlight: [15]> | ||
Línea 156: | Línea 168: | ||
* Línea 15: Hemos añadido la directiva ''ng-view'' para que aquí se muestren las otras páginas. | * 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 ===== | ===== Ejemplo ===== | ||
- | <note important>Como este ejemplo necesita de ver como cambia la URL del navegador , es mejor abrir en una nueva página el [[http://run.plnkr.co/plunks/JXPKf3|ejemplo]].</note> | + | <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}} | {{url>http://embed.plnkr.co/JXPKf3}} |