Muestra las diferencias entre dos versiones de la página.
unidades:04_masdirectivas:12_ejemploseguro [2014/08/05 16:30] admin [Ejemplo] |
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'' |