Curso de AngularJS y REST

Herramientas de usuario

Herramientas del sitio

Traza:
unidades:04_masdirectivas:12_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:04_masdirectivas:12_ejemploseguro [2014/08/05 00:42] – adminunidades:04_masdirectivas:12_ejemploseguro [2014/08/30 10:07] (actual) – admin
Línea 7: Línea 7:
     * Usaremos ''ng-include''.     * Usaremos ''ng-include''.
     * En la cabecera añadiremos una imagen usando ''ng-src''     * En la cabecera añadiremos una imagen usando ''ng-src''
-  * Añadir en el servicio ''remoteResource'' el obtener una lista de seguros médicos +  * Añadir en el servicio ''remoteResource'' obtener una lista de seguros médicos 
   * Añadir una página llamda "listado.html" para ver todos los seguros médicos que ya existen   * Añadir una página llamda "listado.html" para ver todos los seguros médicos que ya existen
     * ''ng-repeat'' para crear la tabla     * ''ng-repeat'' para crear la tabla
     * Enlazaremos los datos con ''ng-bind''     * Enlazaremos los datos con ''ng-bind''
     * Añadiremos links a la tabla usando ''ng-href''     * Añadiremos links a la tabla usando ''ng-href''
-    * Cambiaremos el estilo usando ''ng-class'' +    * Cambiaremos el estilo usando ''ng-style'' 
-    * Usaremo ''ng-switch'' para mostrar el nombre del sexo en la tabla+    * Usaremos ''ng-switch'' para mostrar el nombre del sexo en la tabla
   * Mover el formulario a la página "detalle.html"   * Mover el formulario a la página "detalle.html"
-  * Hacer que la página principal permita ir a las página de "listado.html" y "detalle.html" +  * Hacer que la página principal permita ir a las páginas de "listado.html" y "detalle.html" 
-  * Quitar las referencias a la imagen de cada controlador y ponerlos en el $rootScope+  * Quitar en cada controlador las referencias a la imagen y ponerlas en el $rootScope
 ===== Select con ng-options ===== ===== Select con ng-options =====
 En el tag ''<select>'' vamos a usar la directiva ''ng-options''. En el tag ''<select>'' vamos a usar la directiva ''ng-options''.
Línea 40: Línea 40:
  
 ===== Cabecera y pie ===== ===== Cabecera y pie =====
-Vamos a añadir una cabecera y un pie en ficheros separados para que luego estos ficheros se puedan reusar en otras páginas y para que el código sea más ordenado.+Vamos a añadir una cabecera y un pie en ficheros separados para que luego estos ficheros se puedan reusar en otras páginas y para que el código esté más ordenado.
  
 <sxh html;title:pie.html> <sxh html;title:pie.html>
Línea 53: Línea 53:
 </div> </div>
 </sxh> </sxh>
-Creamos el fichero con el contenido de la cabecera y vemos como la URL de la imagen es la propiedad ''urlLogo'' del ''$scope''.+Creamos el fichero con el contenido de la cabecera y vemos cómo la URL de la imagen es la propiedad ''urlLogo'' del ''$scope''.
  
 Así que añadimos la propiedad al ''$scope'' Así que añadimos la propiedad al ''$scope''
Línea 149: Línea 149:
 Vemos que ahora en vez de ser un objeto JSON es un array JSON ya que empieza por "[" y acaba por "]" y dentro hay varios objetos separados por comas. Vemos que ahora en vez de ser un objeto JSON es un array JSON ya que empieza por "[" y acaba por "]" y dentro hay varios objetos separados por comas.
  
-La modificación del servicio es muy sencilla ya que solo hay que añadir un nuevo método que es prácticamente igual al que ya había.+La modificación del servicio es muy sencilla ya que sólo hay que añadir un nuevo método que es prácticamente igual al que ya había.
 <sxh js;highlight: [12,13,14,15,16,17,18,19,20,21]> <sxh js;highlight: [12,13,14,15,16,17,18,19,20,21]>
 function RemoteResource($http,baseUrl) { function RemoteResource($http,baseUrl) {
Línea 175: Línea 175:
 </sxh> </sxh>
   * Linea 12: Hemos añadido el método ''list''. La única diferencia por ahora con el método ''get'' es que el fichero que obtiene se llama ''listado_seguros''.   * Linea 12: Hemos añadido el método ''list''. La única diferencia por ahora con el método ''get'' es que el fichero que obtiene se llama ''listado_seguros''.
 +
 +===== Página list.html =====
 +Se crea una nueva página que permita mostrar el listado de los seguros.
 +
 +==== El controlador ====
 +Añadimos un controlador que cargue los datos de todos los seguros usando el nuevo método de ''list'' del servicio ''remoteResource''.
 +
 +<sxh js>
 +app.controller("ListadoSeguroController", ['$scope', 'remoteResource',  function($scope, remoteResource) {
 +    $scope.seguros = [];
 +  
 +    remoteResource.list(function(seguros) {
 +      $scope.seguros = seguros;
 +    }, function(data, status) {
 +      alert("Ha fallado la petición. Estado HTTP:" + status);
 +    });
 +
 +  }
 +]);
 +</sxh>
 +
 +==== El bucle ====
 +Creamos una tabla en la que se repiten las filas para mostrar cada seguro médico.
 +
 +<sxh html>
 +      <tr ng-repeat="seguro in seguros" ng-style="{color:($odd?'red':'green')}>
 +        <td><a ng-href="./seguros/edit/{{seguro.nif}}">{{seguro.nif}}</a></td>
 +        <td>{{seguro.nombre}}</td>
 +        <td>{{seguro.ape1}}</td>
 +        <td ng-switch on="seguro.sexo">
 +          <span ng-switch-when="H">Hombre</span>
 +          <span ng-switch-when="M">Mujer</span>
 +          <span ng-switch-when=""></span>
 +          <span ng-switch-default>Desconocido</span>
 +        </td>
 +      </tr>
 +</sxh>
 +  * Línea 1: Usamos ''ng-style'' y ''$odd'' para cambiar el color de la línea entre el verde y el rojo. Hay que fijarse que hemos puesto el objeto directamente en la directiva en vez de ponerlo en el ''$scope''. Lo hemos hecho así para poder usar directamente la variable ''$odd'' ya que no está disponible en el ''$scope'' del controlador.
 +  * Línea 2: En la columna del NIF hay un link que usa la directiva ''ng-href''. Sin embargo, dicho Link realmente no funciona aun y ésta tampoco es la mejor forma de poner el link. Ya veremos todo ésto más adelante cuando veamos la rutas.
 +  * Línea 5: Ponemos la directiva ''ng-switch'' para mostrar en función del campo ''sexo'' un texto u otro (("Hombre", "Mujer" , "" o "Desconocido")). Aquí es cuando realmente tiene sentido el ''ng-switch'' ya que no queremos que un texto u otro se haga visible o invisible sino que realmente sólo queremos que esté uno de ellos. 
 +==== El pie de la tabla ====
 +En el pie de la tabla mostramos el total de los seguros médicos.Usamos para ello la directiva ''ng-bind'' ya que no queremos que se vea el ''%%{{seguros.length%%}}'' mientras aún no se han cargado los datos.
 +
 +<sxh html>
 +    <tfoot>
 +      <tr>
 +        <td colspan="3">El Nº de seguros medicos es:</td>
 +        <td ng-bind="seguros.length"></td>
 +      </tr>
 +    </tfoot>
 +</sxh>
 +  * Línea 4: Usamos la directiva ''ng-bind'' ya que no queremos que se vea el ''%%{{seguros.length%%}}'' mientras aún no se han cargado los datos.
  
 ===== La imagen en el $rootScope ===== ===== La imagen en el $rootScope =====
 En cada uno de los controladores habría que poner en su ''$scope'' la propiedad ''urlLogo'' con la URL de la imagen. En cada uno de los controladores habría que poner en su ''$scope'' la propiedad ''urlLogo'' con la URL de la imagen.
  
-Para evitar hacerlo en todos los controladores lo ponemos únicamente en el ''$rootScope'' y además usamos una contante para guardar su valor.+Para evitar hacerlo en todos los controladores lo ponemos únicamente en el ''$rootScope'' y además usamos una constante para guardar su valor.
  
 <sxh js> <sxh js>
Línea 187: Línea 239:
 }]); }]);
 </sxh> </sxh>
 +===== De index.html a detalle.html =====
 +Creamos una nueva página llamada ''detalle.html'' con el contenido de la página ''index.html''. Se hace ésto ya que ahora en ''index.html'' queremos poner 2 enlaces para poder ir a las 2 páginas que ya tenemos.
  
 +El único cambio que hemos hecho es que ahora el controlador se llama ''DetalleSeguroController'' en vez de ''SeguroController''. Hemos hecho este cambio ya que ahora hay más de un controlador relativo a "Seguro".
 +===== Nuevo contenido de index.html =====
 +Como ya hemos dicho anteriormente, en el nuevo ''index.html'' incluimos los enlaces a las nuevas páginas:
 +  * ''detalle.html''
 +  * ''listado.html''
 +
 +<sxh html>
 +  <a href="listado.html" >Listado de seguros medicos</a>
 +  <br>
 +  <a href="detalle.html" >detalle de seguros medicos</a>
 +</sxh>
 +
 +Al ser una página de AngularJS tenemos que crear un nuevo controlador para esta página y lo llamamos ''MainController'' aunque no hará nada.
 +
 +<sxh js>
 +app.controller("MainController", ['$scope', function($scope) {
 +
 +}]);
 +</sxh>
 ===== Ejemplo ===== ===== Ejemplo =====
-Ahora juntamos todos los cambios en el siguiente ejemplo.+Ahora pongamos todos los cambios en el ejemplo. Como ha habido tantos cambios vamos a resumir un poco la estructura: 
 + 
 +  * Módulos: 
 +    * ''app'' 
 +  * Controladores: 
 +    * ''DetalleSeguroController'' 
 +    * ''ListadoSeguroController'' 
 +    * ''MainController'' 
 +  * Páginas: 
 +    * ''index.html'' 
 +    * ''detalle.html'' 
 +    * ''listado.html'' 
 +    * ''cabecera.html'' 
 +    * ''pie.html'' 
 +  * Servicios: 
 +    * ''provider remoteResource'' 
 +    * ''value urlLogo'' 
 +    * ''constant baseUrl'' 
 + 
 + 
 +<note warning> 
 +El ejemplo tiene varias cosas que están mal hechas, especialmente la parte referida a las rutas. A lo largo del curso iremos mejorando el ejemplo hasta dejarlo lo mejor posible.  
 +</note>
  
 {{url>http://embed.plnkr.co/IKYXLx}} {{url>http://embed.plnkr.co/IKYXLx}}
unidades/04_masdirectivas/12_ejemploseguro.1407192148.txt.gz · Última modificación: por admin