¡Esta es una revisión vieja del documento!


3.10 Ejemplo servicio

En este tema retornamos ahora el ejemplo del seguro médico para añadir un provider.

Al ver el servicio $http en el tema 3.2 $http vimos que no debía hacerse una llamada a $http en el propio controlador . Ahora vamos a crea un provider que encapsule la llamada a $http.

El servicio será un objeto llamado remoteResource que nos permitirá acceder al servidor para acceder a los datos. Como aun no hemos visto la parte de servidor ni la parte de REST ni las promesas , solo vamos a hacer un único método sencillo que nos permita leer los datos, mas adelante en el curso seguiremos mejorando este servicio. Por lo tanto aun será un poco chapuza el ejemplo.

La configuración

Nuestro servicio va a ser un provider ya que tenemos que indicar la url a partir de la que se debe bajar los datos. Como hemos hecho en el tema anterior eso lo pondremos en una constante de nuestra aplicación.

app.constant("baseUrl",".");

La contante vale el valor ”.” porque los datos a bajar están en la misma ruta que nuestra página web.

El provider tendrá un único método para configurarlo llamado setBaseUrl por lo que tendremos el siguiente bloque config:

app.config(['baseUrl','remoteResourceProvider',function(baseUrl,remoteResourceProvider){
  remoteResourceProvider.setBaseUrl(baseUrl);
}]);

Fijaté como el nombre del provider es “remoteResourceProvider”, es decir que acaba en “Provider” aunque nuestro servicio solo se llama “remoteResource”.

El provider

Ahora vamos a definir el provider

function RemoteResourceProvider() {
  var _baseUrl;
  this.setBaseUrl=function(baseUrl) {
    _baseUrl=baseUrl;
  }
  this.$get=['$http',function($http) {
    return new RemoteResource($http,_baseUrl);
  }];
}

app.provider("remoteResource",RemoteResourceProvider);

  • Línea 1: Definimos el constructor de la clase RemoteResourceProvider
  • Línea 3: Un método público llamado setBaseUrl para configurar el servicio. Este es el método que hemos llamado desde el bloque config.
  • Línea 6: El método $get que es el factory-provider con la función de factoría a la que se le inyecta el servicio de $http.
  • Línea 7: Ahora la función de factoría crea el nuevo objeto de la clase RemoteResource. Siendo esta clase realmente la que hace todo el trabajo y la que se usará desde el controlador. En el constructor además de pasarle el $http que necesita, también se le pasa la URL Base para configurar el servicio.
  • Línea 11: Finalmente se registra el provider.

La clase del propio servicio

Por último nos queda definir la propia clase que implementa el servicio que hemos llamado RemoteResource.

Esta clase tiene un único método llamado get. Este método acepta como parámetros dos funciones de callback . La primera función se llamará si se han podido obtener los datos y tiene como parámetro los datos obtenidos. La segunda función se llamará si ha habido algún error y tiene como parámetros los datos obtenidos y el estado HTTP.

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

  • Línea 1: Al constructor de la clase le pasamos el servicio $http y la URL Base desde la que pedir los datos.
  • Línea 2: Es el único método público llamado get y como ya hemos dicho acepta dos funciones como parámetros.
  • Línea 5: La URL que se usará se calcula en función del parámetro baseUrl.
  • Línea 7: Si todo va bien y se han podido obtener los datos, se llama a la función de callback llamada fnOK pasando como argumento los datos obtenidos.
  • Línea 9: Si algo ha fallado, se llama a la función de callback llamada fnError pasando como argumentos los datos obtenidos y el estado HTTP.

El controlador

Por último nos queda ver como queda el controlador al usar el nuevo servicio.

app.controller("SeguroController",['$scope','remoteResource',function($scope,remoteResource) {
  $scope.seguro={
    nif:"",
    nombre:"",
    ape1:"",
    edad:undefined,
    sexo:"",
    casado:false,
    numHijos:undefined,
    embarazada:false,
    coberturas: {
      oftalmologia:false,
      dental:false,
      fecundacionInVitro:false
    },
    enfermedades:{
      corazon:false,
      estomacal:false,
      rinyones:false,
      alergia:false,
      nombreAlergia:""
    },
    fechaCreacion:new Date()
  }
  
  remoteResource.get(function(seguro) {
    $scope.seguro=seguro;
  },function(data,status) {
    alert("Ha fallado la petición. Estado HTTP:"+status);
  });
  
}]);

  • Línea 1: Ahora en el controlador en vez de inyectar el servicio $http se inyecta el servicio remoteResource.
  • Linea 26: Se llama al método get del servicio remoteResource y se le pasa como argumentos las 2 funciones.
  • Línea 27: Si todo va bien , se pasan los datos a la propiedad seguro del $scope.
  • Línea 28: Es la segunda función anónima que se llama si hay algún error.
  • Línea 29: Si falla algo se ejecuta el alert.

Ejemplo

El código completo del ejemplo es el siguiente:

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-controller="SeguroController">
    <form>
      <fieldset>
        <legend>Seguro Médico</legend>
          <label for="nif">NIF:</label><input id="nif" name="nif" type="text" ng-model="seguro.nif" /><br>
          <label for="nombre">Nombre:</label><input id="nombre" name="nombre" type="text" ng-model="seguro.nombre" /><br>
          <label for="ape1">1º Apellido:</label><input id="ape1" name="ape1" type="text" ng-model="seguro.ape1" /><br>
          <label for="edad">Edad:</label><input id="edad" name="edad" type="text" ng-model="seguro.edad" /><br>
          <label for="sexo">Sexo:</label><select id="sexo" name="sexo" type="checkbox" ng-model="seguro.sexo" ><option value="">--Elige opcion--</option><option value="H">Hombre</option><option value="M">Mujer</option></select><br>
          <label for="casado">Casado:</label><input id="casado" name="casado" type="checkbox" ng-model="seguro.casado" /><br>
          <label for="numHijos">Nº Hijos:</label><input id="numHijos" name="numHijos" type="text" ng-model="seguro.numHijos" /><br>
          <label for="embarazada">Embarazada:</label><input id="embarazada" name="embarazada" type="checkbox" ng-model="seguro.embarazada" /><br>
          <label for="fechaCreacion">Fecha de creaci&oacute;n:</label><input id="fechaCreacion" name="fechaCreacion" type="text" ng-model="seguro.fechaCreacion" /><br>
      </fieldset>
      <fieldset>
        <legend>Coberturas</legend>
          <label for="oftalmologia">Oftalmologia:</label><input id="oftalmologia" name="oftalmologia" type="checkbox" ng-model="seguro.coberturas.oftalmologia" /><br>
          <label for="dental">Dental:</label><input id="dental" name="dental" type="checkbox" ng-model="seguro.coberturas.dental" /><br>
          <label ng-show="seguro.sexo==='M'" for="fecundacionInVitro">Fecundacion In Vitro:</label><input ng-show="seguro.sexo==='M'" id="fecundacionInVitro" name="fecundacionInVitro" type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" /><br>
      </fieldset>      
      <fieldset>
      <legend>Enfermedades</legend>
          <label for="corazon">Corazon:</label><input id="corazon" name="corazon" type="checkbox" ng-model="seguro.enfermedades.corazon" /><br>
          <label for="estomacal">Estomacal:</label><input id="estomacal" name="estomacal" type="checkbox" ng-model="seguro.enfermedades.estomacal" /><br>
          <label for="rinyones">Ri&ntilde;ones:</label><input id="rinyones" name="rinyones" type="checkbox" ng-model="seguro.enfermedades.rinyones" /><br>
          <label for="alergia">Alergia:</label><input id="alergia" name="alergia" type="checkbox" ng-model="seguro.enfermedades.alergia" /><br>
          <label for="nombreAlergia">Nombre de la alergia:</label><input ng-disabled="seguro.enfermedades.alergia===false" id="nombreAlergia" name="nombreAlergia" type="text" ng-model="seguro.enfermedades.nombreAlergia" /><br>
      </fieldset> 
    </form>
  </body>
</html>

var app = angular.module("app", []);

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

function RemoteResourceProvider() {
  var _baseUrl;
  this.setBaseUrl=function(baseUrl) {
    _baseUrl=baseUrl;
  }
  this.$get=['$http',function($http) {
    return new RemoteResource($http,_baseUrl);
  }];
}

app.provider("remoteResource",RemoteResourceProvider);



app.constant("baseUrl", ".");
app.config(['baseUrl', 'remoteResourceProvider',
  function(baseUrl, remoteResourceProvider) {
    remoteResourceProvider.setBaseUrl(baseUrl);
  }
]);


app.controller("SeguroController", ['$scope', 'remoteResource',
  function($scope, remoteResource) {
    $scope.seguro = {
      nif: "",
      nombre: "",
      ape1: "",
      edad: undefined,
      sexo: "",
      casado: false,
      numHijos: undefined,
      embarazada: false,
      coberturas: {
        oftalmologia: false,
        dental: false,
        fecundacionInVitro: false
      },
      enfermedades: {
        corazon: false,
        estomacal: false,
        rinyones: false,
        alergia: false,
        nombreAlergia: ""
      },
      fechaCreacion: new Date()
    }

    remoteResource.get(function(seguro) {
      $scope.seguro = seguro;
    }, function(data, status) {
      alert("Ha fallado la petición. Estado HTTP:" + status);
    });

  }
]);

Malas prácticas

app.provider("remoteResource", function() {
  var _baseUrl;
  this.setBaseUrl = function(baseUrl) {
    _baseUrl = baseUrl;
  }
  this.$get = ['$http',
    function($http) {
      return new function($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);
          });
        }
      }($http, _baseUrl);
    }
  ];
});

unidades/03_servicios/10_ejemploseguro.1406757565.txt.gz · Última modificación: 2014/07/30 23:59 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0