Curso de AngularJS y REST

Herramientas de usuario

Herramientas del sitio

Traza:
unidades:07_rutas:05_ejemploseguro

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión		Revisión previa
unidades:07_rutas:05_ejemploseguro [2014/09/09 19:28] – adminunidades: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 cabera 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:
unidades/07_rutas/05_ejemploseguro.1410283693.txt.gz · Última modificación: por admin