3.1 Servicios

Por ahora hemos visto 2 artefactos de AngularJS , los controladores y las directivas. En esta unidad vamos a ver otro conjunto de nuevos artefactos: Los Servicios. Aunque hablamos de forma generica de servicios , AngularJS tiene realmente 5 tipos distintos de servicios:

• Constantes
• Valores
• Factorias
• Servicios
• Proveedores

Estos 5 tipos corresponden a 5 métodos que existen en la clase “Modulo”. Aunque repito que se suele hablar de todos ellos simplemente como servicios.

Es un objeto JavaScript que nos permite obtener información. Aparentemente nada nuevo que entender, sería por ejemplo un DAO en Java o un servicios de Java. Lo importante de ésto es que un servicio nunca ¹⁾ interacciona con la propia página, solo con otros servicios o con un servidor de datos que pueda estar en otro Host.

Ejemplos de serviciós serían:

• El servicio $http de AngularJS. Este servicio hace la típica llamada AJAX a un servidor para obtener información de él. Como vemos cumple perfectamente la definición de obtener información.
• Un servicio que se conecta a un host que nos retorna el valor del Euribor.
• Un posible servicio de cálculo de Hipoteca que dado los datos de una hipoteca (Importe del préstamo, años, diferencial ,etc) nos calculara cuanto hay que pagar mensualmente.
• Un servicio que nos hiciera las operaciones de CRUD sobre el servidor.
• Un servicio que transformara los String con una fecha en un objeto Date.
• El servicio $log de Angular que nos permite generar un log de nuestra aplicación.
• Etc.

¿Y que tiene ésto de especial? ¿Porque Angular tiene esos artefactos si quizás tu ya tengas clases JavaScript que actúan como servicios? ¿que ventajas nos ofrecen?

Las ventajas son las siguientes:

• Facilitar el TDD
• Permitir decorar los servicios
• Facilitar las relaciones entre servicios
• Modificar las implementaciones

Aunque en este curso no se trata el tema del Desarrollo guiado por pruebas o TDD, todo AngularJs está diseñado para facilitar el TDD. Un ejemplo de ello es que las instancias de los servicios no se obtienen directamente sino que se obtienen mediante Inyección de Dependencias. Es decir en un controlador u otro servicio le diremos que deseamos una instancia de un servicio, pero no lo crearemos mediante la palabra reservada de JavaScript de new. Esto nos permitirá al hacer TDD modificar los servicios por objetos Mock y poder hacer pruebas unitarias de nuestros controladores o servicios.

Es decir, al ser el servicio un artefacto de Angular , podremos cambiarlo por una implementación vacía que facilita el TDD.

Angular nos permite decorar los servicios. Esto significa que permite que interceptemos la creación del servicio para poder añadir métodos os modificar su funcionamiento. Esto es muy útil por ejemplo para poder hacer modificaciones en servicios de terceros que no podemos modificar.

Cuando la aplicación se vuelve compleja empiezan a depender unos servicios de otros. En los ejemplos de servicios que hemos visto en este tema, está el servicio de cálculo de hipoteca que dependería del servicio de obtención del euribor.

Cuando la cosa se complica podría pasar que se dependiera de un servicio que aun no ha sido inicializado. Angular tiene los 5 tipos de servicios que hemos enumerado formando una jerarquía que permite evitar esos problemas.

Podríamos tener 2 módulos que implementen el mismo servicio aunque de 2 formas distintas. Cambiar de una implementación a otra sería tan sencillo como hacer que dependiera de un módulo u otro (Pero no de los 2 a la vez).

En nuestro ejemplo de servicio de obtención del Euribor se podría haber creado un módulo llamado “BBVA” que incluyera el servicio del euribor de forma que se conecte al Banco BBVA para obtener el valor del Euribor. En caso de que no nos interesara por cualquier motivo seguir usando el BBVA podríamos crear otro módulo llamado “Santander” en el que estuviera también el servicio de obtener el Euribor.

Cambiar de un servicio a otro sería tan sencillo como cambiar en el módulo de nuestra aplicación del módulo “BBVA” a “Santander”

La primera característica de los servicios es que tiene un nombre (al igual que los controladores) y como ya dijimos en Espacio de nombres dicho nombre es independiente del módulo en el que fueron añadidos. Así que para usar un servicio solo necesitamos saber su nombre.

Un sencillo servicio de AngularJS es el servicio de $log. Este servicio simplemente llama a console.log pero nos abstrae por si no existe el objeto console. $log dispone de varios métodos pero por ahora nos quedaremos con el método “debug” que permite pasarle un mensaje para que se muestre por la consola del navegador.

Continuando ahora con nuestro ejemplo del seguro médico vamos a añadir un mensaje de log cuando se configura el $scope.

var app=angular.module("app",[]);
  
app.controller("SeguroController",function($scope,$log) {
  $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()
  }
  
  $log.debug("Acabamos de crear el $scope");
  
});

Una cosa que llama la atención es porque en angular los servicios y otros artefactos empiezan sus nombres por “$”. Por lo que yo he podido saber es simplemente para evitar que choque el nombre con otro servicio o artefacto que se llame igual y creado por nosotros o terceras personas.

También hay nombres en angular que empiezan por “$$” . En ese caso significa que son cosas internas de AngularJs y que no son públicas , por lo que no deberían usarse ya que de una versión a otra podrían desaparecer. Aunque en internet hay muchas veces que para hacer cosas que no permite angular se recurran a artefactos que empiezan por “$$”.