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:

• Modificar el desplegable de “Sexo” para que use ng-options
• Añadir una cabecera y un pie:
  • Usaremos ng-include.
  • 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 una página llamda “listado.html” para ver todos los seguros médicos que ya existen
  • ng-repeat para crear la tabla
  • Enlazaremos los datos con ng-bind
  • Añadiremos links a la tabla usando ng-href
  • Cambiaremos el estilo usando ng-class
  • Usaremo 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ágina de “listado.html” y “detalle.html”
• Quitar en cada controlador las referencias a la imagen y ponerlas en el $rootScope

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>

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.

<div>&copy; Seguros medicos S.A.</div>

<div>
  <h1><img ng-src="{{urlLogo}}" /> Seguro medico</h1>
</div>

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>

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

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

Se crea una nueva página que permita mostrar el listado de los seguros.

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

  }
]);

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

      <tr ng-repeat="seguro in seguros">
        <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>

• 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 5: Ponemos la directiva ng-switch para mostrar en función del campo sexo un texto u otro ¹⁾. 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.

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.

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

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

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.

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

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:

• detalle.html
• listado.html

Como ya hemos dicho en el nuevo index.html incluimos los enlaces a:

• detalle.html
• listado.html

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

}]);

Ahora juntamos todos los cambios en el siguiente ejemplo.