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/08/27 11:04] – [Cargar los datos del listado desde el ''resolve'' y usarlos desde el controlador] adminunidades: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}}
unidades/07_rutas/05_ejemploseguro.1409130285.txt.gz · Última modificación: por admin