Muestra las diferencias entre dos versiones de la página.
unidades:07_rutas:05_ejemploseguro [2014/08/27 11:04] admin [Cargar los datos del listado desde el ''resolve'' y usarlos desde el controlador] |
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'' y usarlos desde el controlador | + | * 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 | + | * 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. |
Al añadir las rutas hemos tenido que hacer otros 2 cambios: | Al añadir las rutas hemos tenido que hacer otros 2 cambios: | ||
Línea 139: | Línea 139: | ||
var app = angular.module("app", ['ngRoute']); | var app = angular.module("app", ['ngRoute']); | ||
</sxh> | </sxh> | ||
- | ===== 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 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'' ya que ahora siempre se muestran dentro de ''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 cabera y el pie. | + | 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 171: | Línea 171: | ||
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. | 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''. | + | Para ello sólo hemos añadido un link con la ruta correspondiente a ''detalle.html''. |
<sxh html;highlight: [20]> | <sxh html;highlight: [20]> | ||
Línea 207: | Línea 207: | ||
</table> | </table> | ||
</sxh> | </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. 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. | + | * 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 ===== | ===== 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, vemos a obtener los datos en el ''resolve'' de la ruta. | + | 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: | Para ello hemos modificado la definición de la ruta de la siguiente forma: | ||
Línea 224: | Línea 224: | ||
}); | }); | ||
</sxh> | </sxh> | ||
- | * Línea 4: Se añadir la propiedad ''resolve'' que contiene el objeto con los datos a //resolver//. | + | * 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 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. | * 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. | + | 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]> | <sxh js;highlight: [1,2]> | ||
Línea 239: | Línea 239: | ||
* Línea 2: Ahora simplemente los guardamos en el ''$scope'' y se mostrarán en la tabla HTML. | * 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. | + | 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> | <note tip> | ||
Línea 246: | Línea 246: | ||
===== Cargar los datos del detalle desde el ''resolve'' y usarlos desde el controlador ===== | ===== 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> | ||
Línea 253: | Línea 326: | ||
===== 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}} |