Muestra las diferencias entre dos versiones de la página.
unidades:07_rutas:05_ejemploseguro [2014/09/09 19:30] admin |
unidades:07_rutas:05_ejemploseguro [2014/09/16 19:33] (actual) admin |
||
---|---|---|---|
Línea 3: | Línea 3: | ||
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áginas usando las rutas | + | * Navegar entre páginas usando las rutas. |
* Quitar de las páginas la cabecera y el pie ya que ahora sólo 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. | ||
- | Éso nos permite que desde el método ''get'' del servicio ''remoteResource'' acepte como argumento el ''idSeguro'' y podemos ya leer sólo 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 75: | Línea 75: | ||
<note tip> | <note tip> | ||
- | 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'' | + | 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> | ||
Línea 123: | Línea 123: | ||
Hemos 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 llamará ''/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 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''. | + | 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''. Ésto nos permitirá que, al ir a la página ya 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. | + | 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 140: | Línea 140: | ||
</sxh> | </sxh> | ||
===== Quitar de las páginas la cabera y el pie ya que ahora sólo 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 cabecera 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. | ||
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 óolo 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 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, vamos 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: |