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 servicios de forma genérica, AngularJS tiene realmente 5 tipos distintos de servicios:

• Constantes
• Valores
• Servicios
• Factorias
• 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, sólo con otros servicios o con un servidor de datos que pueda estar en otro Host.

Ejemplos de servicios 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 dados los datos de una hipoteca (Importe del préstamo, años, diferencial ,etc) nos calculara cuánto 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 qué tiene ésto de especial? ¿Por qué Angular tiene esos artefactos si quizás tú ya tengas clases JavaScript que actúan como servicios? ¿qué 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. Ésto significa que permite que interceptemos la creación del servicio para poder añadir métodos os modificar su funcionamiento. Ésto 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 aún 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 tienen 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 sólo necesitamos saber su nombre.

Un servicio sencillo 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.

¿Cómo obtenemos una instancia del servicio de $log en el controlador? Debemos añadir un nuevo parámetro a nuestra función del controlador con el nombre del servicio, que como ya hemos dicho en nuestro caso es $log. Si tuviéramos que solicitar más servicios se añadirían como más parámetros.

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

• Línea 3: Vemos que la función del controlador ahora tiene 2 parámetros, el $scope y el $log.
• Línea 28: Usamos el objeto $log llamando al método debug.

Si mostramos la consola de chrome (CTRL+SHIFT+J) veremos el mensaje de “Acabamos de crear el $scope”

Es decir que en vez de pedir nosotros las instancias de los servicios, se incluyen como parámetros de nuestra función del controlador y cuando AngularJS llame al controlador nos inyectará las instancias de los servicios que hemos solicitado.

Para mejorar el rendimiento u ofuscar el código javaScript se suele recurrir a herramientas que minimizan el código JavaScript. Estas herramientas entre otras cosas renombran las variables. El problema es que si se renombra la variable del servicio del $log o incluso el nombre del $scope, entonces AngularJS no reconocerá lo que le pedimos y fallará.

Es decir, al minimizar nuestra función se queda de la siguiente forma (Hemos omitido aquí el cuerpo de la función para mejorar la legibilidad):

app.controller("SeguroController",function(a,b) {
});

Tras minimizar el código, los parámetros se llamarían a y b por lo que AngularJS nos dirá que no conoce ningún servicio llamado a ni ningún servicio llamado b y fallará nuestro código.

Los creadores de AngularJS conocedores de este problema han creado una solución. En vez de pasar la función , pasamos un array en el que los n primeros elementos son Strings con el nombre de los servicios a inyectar y el último parámetro del array será la propia función.

Veamos ahora cómo debería ser nuestro código:

app.controller("SeguroController",['$scope','$log',function($scope,$log) {
}]);

Vemos cómo se pasa un array con 3 elementos. El primero de ellos es un String con el texto $scope , el segundo parámetro es otro String con el texto $log y el tercer parámetro es la propia función.

Nótese que ahora hay que cerrar el corchete del array al acabar la función

Si ahora minimizáramos el código quedaría de la siguiente forma:

app.controller("SeguroController",['$scope','$log',function(a,b) {
}]);

Los parámetros al minimizarlos se llaman a y b. Pero ahora éso no es un problema para angular porque él sabe que el primer parámetro corresponde a $scope ya que es el texto del primer elemento del array y el segundo parámetro corresponde al servicio $log ya que es el texto del segundo elemento del array.

Es decir que el texto de cada elemento del array ²⁾ se corresponde con el nombre de lo que queremos inyectar en la función del controlador.

Finalmente el ejemplo quedaría de la siguiente forma:

var app=angular.module("app",[]);
  
app.controller("SeguroController",['$scope','$log',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");
  
}]);

• Línea 3: Ahora vemos que se pasa el array con el nombre de las instancias a inyectar y como último parámetro la propia función.
• Línea 30: Tambien hay que cerrar el array con el ]

Los nombres de los servicios deben seguir la misma nomenclatura que los nombre de las variables. Es decir que la primera palabra debe ser en minúscula y el resto de palabras deben empezar en mayúscula (ver CamelCase).

¿Por qué deben seguir la misma norma que las variables? Porque cuando inyectamos un servicio lo hacemos sobre una variable que se llama como el servicio por lo tanto el servicio se debe llamar como las variables.

En angular los servicios y otros artefactos empiezan siempre sus nombres por “$”. La razón de ello simplemente es evitar que choque el nombre de los servicios de Angular con los servicios creados por nosotros mismos o por terceras librerías.

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. Sin embargo en internet hay muchas veces que para hacer cosas que no permite angular se recurre a artefactos que empiezan por “$$”.

• Developer Guide / Services
• API Reference / ng / service:Lista de servicios de AngularJS del módulo ng
• $log