Muestra las diferencias entre dos versiones de la página.
unidades:04_masdirectivas:12_ejemploseguro [2014/08/01 17:38] admin |
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 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" | ||
+ | * 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 | ||
===== Select con ng-options ===== | ===== Select con ng-options ===== | ||
En el tag ''<select>'' vamos a usar la directiva ''ng-options''. | En el tag ''<select>'' vamos a usar la directiva ''ng-options''. | ||
Línea 37: | 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 50: | 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 146: | 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 172: | Línea 175: | ||
</sxh> | </sxh> | ||
* Linea 12: Hemos añadido el método ''list''. La única diferencia por ahora con el método ''get'' es que el fichero que obtiene se llama ''listado_seguros''. | * Linea 12: Hemos añadido el método ''list''. La única diferencia por ahora con el método ''get'' es que el fichero que obtiene se llama ''listado_seguros''. | ||
+ | |||
+ | ===== Página list.html ===== | ||
+ | Se crea una nueva página que permita mostrar el listado de los seguros. | ||
+ | |||
+ | ==== El controlador ==== | ||
+ | Añadimos un controlador que cargue los datos de todos los seguros usando el nuevo método de ''list'' del servicio ''remoteResource''. | ||
+ | |||
+ | <sxh js> | ||
+ | app.controller("ListadoSeguroController", ['$scope', 'remoteResource', function($scope, remoteResource) { | ||
+ | $scope.seguros = []; | ||
+ | | ||
+ | remoteResource.list(function(seguros) { | ||
+ | $scope.seguros = seguros; | ||
+ | }, function(data, status) { | ||
+ | alert("Ha fallado la petición. Estado HTTP:" + status); | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | ]); | ||
+ | </sxh> | ||
+ | |||
+ | ==== El bucle ==== | ||
+ | Creamos una tabla en la que se repiten las filas para mostrar cada seguro médico. | ||
+ | |||
+ | <sxh html> | ||
+ | <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>{{seguro.nombre}}</td> | ||
+ | <td>{{seguro.ape1}}</td> | ||
+ | <td ng-switch on="seguro.sexo"> | ||
+ | <span ng-switch-when="H">Hombre</span> | ||
+ | <span ng-switch-when="M">Mujer</span> | ||
+ | <span ng-switch-when=""></span> | ||
+ | <span ng-switch-default>Desconocido</span> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </sxh> | ||
+ | * 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''. 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 ==== | ||
+ | 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> | ||
+ | <tfoot> | ||
+ | <tr> | ||
+ | <td colspan="3">El Nº de seguros medicos es:</td> | ||
+ | <td ng-bind="seguros.length"></td> | ||
+ | </tr> | ||
+ | </tfoot> | ||
+ | </sxh> | ||
+ | * 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 ===== | ||
+ | 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 constante para guardar su valor. | ||
+ | |||
+ | <sxh js> | ||
+ | app.value("urlLogo","http://www.cursoangularjs.es/lib/exe/fetch.php?cache=&media=unidades:04_masdirectivas:medical14.png"); | ||
+ | app.run(["$rootScope","urlLogo",function($rootScope,urlLogo) { | ||
+ | $rootScope.urlLogo=urlLogo; | ||
+ | }]); | ||
+ | </sxh> | ||
+ | ===== 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 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'' | ||
+ | * ''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 ===== | ||
+ | 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}} |