menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:07_rutas:05_ejemploseguro [2014/08/27 11:10] admin [Cargar los datos del detalle 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 , un instante después aparezcan los datos en los campos, vemos a obtener los datos en el resolve de la ruta. | + | 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: | Para ello hemos modificado la definición de la ruta de la siguiente forma: | ||
| Línea 261: | Línea 261: | ||
| </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. 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 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. | + | 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 solo hay que inyectar ''seguro'' y ya tendremos los datos. | + | 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. |
| Línea 314: | Línea 314: | ||
| }]); | }]); | ||
| </sxh> | </sxh> | ||
| - | Línea 1: Inyectamos el //servicio// ''seguro'' que contiene s los datos que se obtuvieron al llamar a ''remoteResource.get(idSeguro)'' | + | 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. | 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á en el formulario toda la información. | + | 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> | <note important>Compara ahora este ejemplo del seguro con el de la unidad anterior y verás la diferencia.</note> | ||
| Línea 326: | 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}} | ||
