Diferencias

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

Enlace a la vista de comparación

unidades:04_masdirectivas:12_ejemploseguro [2014/08/01 18:06]
admin [4.12 Ejemplo de mas directivas]
unidades: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 ​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 =====
 +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.1406909192.txt.gz · Última modificación: 2014/08/01 18:06 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