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 01:03] – [Ejemplo] 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 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>
-      <tr ng-repeat="seguro in seguros">+      <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><a ng-href="./seguros/edit/{{seguro.nif}}">{{seguro.nif}}</a></td>
         <td>{{seguro.nombre}}</td>         <td>{{seguro.nombre}}</td>
Línea 212: Línea 212:
       </tr>       </tr>
 </sxh> </sxh>
-  * 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 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 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 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 ==== ==== 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:+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''   * ''detalle.html''
   * ''listado.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.1407193397.txt.gz · Última modificación: por admin