Tabla de Contenidos

4.12 Ejemplo de mas directivas

En este tema retornamos el ejemplo del seguro médico para añadir varias de las directivas que hemos visto.

La lista de modificaciones a realizar es la siguiente:

Select con ng-options

En el tag <select> vamos a usar la directiva ng-options. Lo primero es incluir en el $scope la propidad sexos con los posibles valores del <select>. 

    $scope.sexos= [
      {
        codSexo:"H",
        descripcion:"Hombre"
      },{
        codSexo:"M",
        descripcion:"Mujer"
      }
    ];

Y modificar el <select> de la siguiente forma para incluir ng-options: 

<select id="sexo" name="sexo" type="checkbox" ng-model="seguro.sexo" ng-options="sexo.codSexo as sexo.descripcion for sexo in sexos" ><option value="">--Elige opcion--</option></select>

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 esté más ordenado. 

<div>&copy; Seguros medicos S.A.</div>
Creamos el fichero con el contenido del pie. 

<div>
  <h1><img ng-src="{{urlLogo}}" /> Seguro medico</h1>
</div>
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 

$scope.urlLogo="http://www.cursoangularjs.es/lib/exe/fetch.php?cache=&media=unidades:04_masdirectivas:medical14.png";

Ahora en la página index.html añadimos los ng-include al pie y a la cabecera: 

  <body ng-controller="SeguroController">
  
    <ng-include src="'cabecera.html'" ></ng-include>
    
    <form> 
    </form>
    
    <ng-include src="'pie.html'" ></ng-include>
  </body>
No se muestra el contenido del tag <form> ni del tag <head> para mejorar la legibilidad

Metodo list del servicio

Vamos a añadir el método list al servicio remoteResource para poder obtener una lista de seguros médicos.

Los datos como en el caso del método get se van a obtener de un fichero estático en formato JSON llamado listado_seguros.json

Un fragmento del fichero es el siguiente: 

[{
  "nif": "12345678Z",
  "nombre": "Carlos",
  "ape1": "Cano",
  "edad": 41,
  "sexo": "H",
  "casado": true,
  "numHijos": 3,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": false,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": true,
    "estomacal": false,
    "rinyones": false,
    "alergia": true,
    "nombreAlergia": "Acaros"
  }
}, {
  "nif": "34783627Z",
  "nombre": "Catalina",
  "ape1": "López",
  "edad": 33,
  "sexo": "M",
  "casado": true,
  "numHijos": 1,
  "embarazada": true,
  "coberturas": {
    "oftalmologia": false,
    "dental": false,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": false,
    "estomacal": false,
    "rinyones": false,
    "alergia": false,
    "nombreAlergia": ""
  }
}, {
  "nif": "29069345J",
  "nombre": "Jose",
  "ape1": "Aguado",
  "edad": 56,
  "sexo": "H",
  "casado": true,
  "numHijos": 2,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": true,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": true,
    "estomacal": true,
    "rinyones": true,
    "alergia": false,
    "nombreAlergia": ""
  }
}]

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 sólo hay que añadir un nuevo método que es prácticamente igual al que ya había. 

function RemoteResource($http,baseUrl) {
  this.get=function(fnOK,fnError) {
        $http({
          method: 'GET', 
          url: baseUrl+'/datos.json'
        }).success(function(data, status, headers, config) {
            fnOK(data);
        }).error(function(data, status, headers, config) {
            fnError(data,status);
        });
      }
  this.list=function(fnOK,fnError) {
        $http({
          method: 'GET', 
          url: baseUrl+'/listado_seguros.json'
        }).success(function(data, status, headers, config) {
            fnOK(data);
        }).error(function(data, status, headers, config) {
            fnError(data,status);
        });
      }
}

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. 

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);
    });

  }
]);

El bucle

Creamos una tabla en la que se repiten las filas para mostrar cada seguro médico. 

      <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>

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. 

    <tfoot>
      <tr>
        <td colspan="3">El Nº de seguros medicos es:</td>
        <td ng-bind="seguros.length"></td>
      </tr>
    </tfoot>

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. 

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;
}]);

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: 

  <a href="listado.html" >Listado de seguros medicos</a>
  <br>
  <a href="detalle.html" >detalle de seguros medicos</a>

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. 

app.controller("MainController", ['$scope', function($scope) {

}]);

Ejemplo

Ahora pongamos todos los cambios en el ejemplo. Como ha habido tantos cambios vamos a resumir un poco la estructura:

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.

1) “Hombre”, “Mujer” , ”” o “Desconocido”