Diferencias

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

--- unidades:04_masdirectivas:12_ejemploseguro [2014/08/01 12:37]
admin [Metodo list del servicio]
+++ unidades:04_masdirectivas:12_ejemploseguro [2014/08/30 10:07] (actual)
admin
@@ Línea 1: / Línea 1: @@
-====== 4.11 Ejemplo de mas directivas ======
+====== 4.12 Ejemplo de mas directivas ======
 En este tema retornamos el ejemplo del seguro médico para añadir varias de las directivas que hemos visto.
@@ Línea 7: / Línea 7: @@
     * Usaremos ''ng-include''.
     * 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 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
     * Enlazaremos los datos con ''ng-bind''
     * 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"
+  * Hacer que la página principal permita ir a las páginas de "listado.html" y "detalle.html"
+  * Quitar en cada controlador las referencias a la imagen y ponerlas en el $rootScope
 ===== Select con ng-options =====
 En el tag ''<select>'' vamos a usar la directiva ''ng-options''.
@@ Línea 37: / Línea 40: @@
 ===== 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>
@@ Línea 50: / Línea 53: @@
 </div>
 </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''
@@ Línea 146: / 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.
-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]>
 function RemoteResource($http,baseUrl) {
@@ Línea 172: / Línea 175: @@
 </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''.
+===== 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 =====
+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 constante para guardar su valor.
+<sxh js>
+app.value("urlLogo","http://www.cursoangularjs.es/lib/exe/fetch.php?cache=&media=unidades:04_masdirectivas:medical14.png");
+app.run(["$rootScope","urlLogo",function($rootScope,urlLogo) {
+    $rootScope.urlLogo=urlLogo;
+}]);
+</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 =====
+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}}

unidades/04_masdirectivas/12_ejemploseguro.1406889439.txt.gz · Última modificación: 2014/08/01 12:37 por admin

Ir hasta arriba