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 08:56] – [De index.html a detalle.html] 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
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 =====
 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 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.1407221784.txt.gz · Última modificación: por admin