Muestra las diferencias entre dos versiones de la página.
unidades:04_masdirectivas:12_ejemploseguro [2014/08/05 01:06] admin [De index.html a detalle.html] |
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 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 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". | ||
===== Nuevo contenido de index.html ===== | ===== Nuevo contenido de index.html ===== | ||
- | Como ya hemos dicho en el nuevo ''index.html'' incluimos los enlaces a: | + | 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 261: | 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}} |