¡Esta es una revisión vieja del documento!


3.9 provider

Por fin llegamos al provider el último de los tipos de servicios en AngularJS y con el que espero que se entiendan por fin las diferencias entre todos ellos.

Un provider es como un factory solo que permite que se configure antes de crear el valor del servicio. En el tema anterior hemos visto el ejemplo del servicio de hash que se configuraba a través de un value llamado algoritmo. Aunque el ejemplo ha funcionado, la verdad es que es un poco chapucero ya que aparentemente no hay relación entre algoritmo y hash . La relación entre ambos queda poco orientada al objeto. El provider viene en nuestra ayuda creando un objeto previo que permite configurar el factory antes de que cree el valor del servicio. Este nuevo objeto se llama Provider y en un bloque config podremos acceder a él para poder configurar nuestro servicio.

Un provider está compuesto de 2 partes:

  • El provider que es una clase JavaScript de la que se crea un único objeto , el cual se permite llamar en un bloque config antes de que se llame al factory-provider y asi poder configurar el factory-provider.
  • El factory-provider el cual crea el valor del servicio. Es prácticamente como la función factory del tema anterior y la llamamos factory-provider

Como siempre hacemos, veamos un ejemplo:

function HashProvider() {
  var _algoritmo="";
  
  this.setAlgoritmo=function(algoritmo) {
    _algoritmo=algoritmo;
  };
  
  this.$get=function() {
    var hashFunction;
  
    if (_algoritmo==="MD5") {
      hashFunction=CryptoJS.MD5;
    } else  if (_algoritmo==="SHA-1") {
      hashFunction=CryptoJS.SHA1;
    } else  if (_algoritmo==="SHA-2-256") {
      hashFunction=CryptoJS.SHA256;
    } else  if (_algoritmo==="SHA-2-512") {
      hashFunction=CryptoJS.SHA512;
    } else {
      throw Error("El tipo de algoritmo no es válido:"+_algoritmo);
    }
  
    var hash=function(message) {
      var objHashResult=hashFunction(message);
      
      var strHashResult=objHashResult.toString(CryptoJS.enc.Base64);
    
      return strHashResult;
    }
  
    return hash;
  }
}

app.provider("hash",HashProvider);

  • Línea 1: Definimos la clase HashProvider. Posteriormente AngularJS creará una instancia de esta clase.
  • Línea 2: Se define la propiedad privada algoritmo la cual contendrá el algoritmo a usar.
  • Línea 4: Método público que nos permite establecer el algoritmo a usar antes de crear la función de hash.
  • Linea 8: Método público que es realmente el factory que creará el valor ser servicio.En toda clase Provider es obligatorio que exista este método público llamado $get. Es una obligación que impone AngularJS para que él sepa cual es el método factory. Podemos ver que este método es exactamente igual al del tema anterior de factory excepto que ahora usa la propiedad privada _algoritmo en vez de llamar al servicio algoritmo. Este es el método que en el tema 3.4 Tipos de servicios llamábamos “factory-provider”.
  • Línea 35: Definimos el provider con el nombre hash y le pasamos como argumento el nombre de la clase HashProvider.

Resumiendo hemos creado una clase JavaScript llamada HashProvider con distintas propiedades y métodos 1) que permitirán configurar el factory-provider. El factory-provider es la función $get del provider. Por lo tanto dicha función hará uso de las propiedades que se ha definido en la clase 2).

Configurando el provider

Ya tenemos definido el provider pero ahora es necesario poder configurarlo para establecer cual es el algoritmo a usar. Los bloques config son los únicos que permiten configurar el provider.

En el bloque config será necesario inyectar el provider , no el factory-provider para poder configurarlo.

app.config(["hashProvider",function(hashProvider) {
  hashProvider.setAlgoritmo("SHA-1");
}]);

  • Línea 1: Inyectamos el provider en la función de config. Hay que fijarse que AngularJS nos obliga en este caso a llamar al proviver “hashProvider” . Es decir que al nombre de nuestro servicio se añade la palabra “Provider” de esa forma le estamos diciendo que queremos el objeto provider para configurarlo y no el objeto final del servicio.
  • Línea 2: Ahora llamamos al método público del provider llamado setAlgoritmo para configurar el algoritmo.

Recuerda que al inyectar el provider en un bloque config hay que incluir en el nombre el sufijo “Provider”.

Por ejemplo si el servicio se llama “login” ,al inyectarlo en un bloque config habrá que poner “loginProvider”

Una vez configurado el provider en el bloque config ya podremos inyectar el servicio donde queramos , en un controlador, en otro servicio, en un bloque run, etc.

Volvamos ahora a repasar la diferencia entre los bloques config y los bloques run. Un bloque config solo existe para poder configurar un provider y ninguno de los servicios está aun creado 3).

Mientras que en un bloque run todos los servicios ya está configurados y se pueden usar. Por ellos el bloque run es mas parecido a un método Main mientras que el bloque config es mas parecido a un trozo de código de preinicialización de la aplicación.

Inyectando dependencias

Ya hemos dicho que un provider está definido por 2 funciones:

  • La función constructora de la clase que permite la configuración, que llamamos provider
  • La función factory que crea el valor del servicio, que llamamos factory-provider.

AngularJS nos permite en ambas funciones que podamos inyectar dependencias aunque en cada uno de ellos de tipos distintos. Veamos que podemos inyectar en cada uno de ellos:

  • provider: Podemos inyectar solo constant y otros providers pero definidos en otros módulos.
  • factory-provider: Podemos inyectar constant, value, service, factory y factory-provider

Veamos ahora un pequeño ejemplo de ello:

app.constant("provincia","Madrid");
app.factory("municipio",function() {
  return "Mostoles";
});

app.provider("direccion",['provincia',function(provincia) {
  this.$get=['municipio',function(municipio) {
    return provincia+","+municipio;
  }]
}]);

  • Línea 6: Definimos un provider llamado “direccion” e inyectamos la constante provincia.
  • Línea 7: En el factory-provider inyectamos el factory municipio

El ejemplo no tiene mucho sentido pero se ha puesto simplemente para ver que se pueden inyectar dependencias en ambas funciones.

Otra cosa interesante de este ejemplo es que en vez de crear la función del Provider aparte , se ha definido como una función anónima de JavaScript. Con cosas que permite el propio lenguaje y no tiene nada que ver con AngularJS.

Mejorando la configuración

Ejemplo

Repasando los tipos de servicios

Ahora es tiempo de que vuelvas a repasar el tema 3.4 Tipos de servicios y ver si ahora lo entiendes todo perfectamente.

Repasa el tema 3.4 Tipos de servicios

Referencias

1) en nuestro ejemplo solo está la propiedad privada _algoritmo y el método público setAlgoritmo
2) en nuestro ejemplo hace uso de la propiedad algoritmo
3) A excepción de constant
unidades/03_servicios/09_provider.1406742243.txt.gz · Última modificación: 2014/07/30 19:44 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