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/05 08:57]
admin [La imagen en el $rootScope]
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
Línea 13: Línea 13:
     * Añadiremos links a la tabla usando ''​ng-href''​     * Añadiremos links a la tabla usando ''​ng-href''​
     * Cambiaremos el estilo usando ''​ng-style''​     * 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 en cada controlador las referencias a la imagen y ponerlas 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 =====
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 197: Línea 197:
  
 ==== El bucle ==== ==== El bucle ====
-Creamos una table en la que se repiten las filas para mostrar cada seguro médico.+Creamos una tabla en la que se repiten las filas para mostrar cada seguro médico.
  
 <sxh html> <sxh html>
Línea 212: Línea 212:
       </tr>       </tr>
 </​sxh>​ </​sxh>​
-  * Línea 1: Usamos ''​ng-style''​ y ''​$odd''​ para cambiar el color de la línea entre el verder ​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 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''​. ​Aunque ​dicho Link realmente no funciona aun y así tampoco es la mejor forma de poner el link. Ya veremos todo esto más adelante cuando veamos la rutas. +  * 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 ​solo queremos que esté uno de ellos. ​+  * 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 ==== ==== El pie de la tabla ====
-En el pie de la tabla mostramos el total de los seguro ​médicos.Usando ​para ello la directiva ''​ng-bind''​ ya que no queremos que se vea el ''​%%{{seguros.length%%}}''​ mientras ​aun no se han cargado los datos.+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> <sxh html>
Línea 226: Línea 226:
     </​tfoot>​     </​tfoot>​
 </​sxh>​ </​sxh>​
-  * Línea 4: Usamos la directiva ''​ng-bind''​ ya que no queremos que se vea el ''​%%{{seguros.length%%}}''​ mientras ​aun no se han cargado los datos.+  * 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 =====
Línea 240: Línea 240:
 </​sxh>​ </​sxh>​
 ===== De index.html a detalle.html ===== ===== 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 tenemos ​ahora.+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"​. 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 ===== ===== Nuevo contenido de index.html =====
-Como ya hemos dicho en el nuevo ''​index.html''​ incluimos los enlaces a las nuevas páginas:+Como ya hemos dicho anteriormente, ​en el nuevo ''​index.html''​ incluimos los enlaces a las nuevas páginas:
   * ''​detalle.html''​   * ''​detalle.html''​
   * ''​listado.html''​   * ''​listado.html''​
Línea 262: Línea 262:
 </​sxh>​ </​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.1407221827.txt.gz · Última modificación: 2014/08/05 08:57 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