Diferencias

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

Enlace a la vista de comparación

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:+Ahoraen 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á queal ir a la página ​sólo se muestren los datos del seguro definido en el parámetro ''​idSeguro''​ en vez de él mismocomo 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 datosen 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ésvamos 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 ​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 datosen 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}}
unidades/07_rutas/05_ejemploseguro.1409130620.txt.gz · Última modificación: 2014/08/27 11:10 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0