¡Esta es una revisión vieja del documento!


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.

¿Que es un servicio?

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 1) 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.

Ventajas

¿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

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.

Permitir decorar los servicios

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.

Facilitar las relaciones entre servicios

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.

Modificar las implementaciones

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”

Usando servicios

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.

¿Como 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 mas servicios se añadirían como mas 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 AngularJS cuando llame al controlador nos inyectará las instancias de los servicios que hemos solicitado.

Minimizando el JavaScript

Para mejorar el rendimiento o 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 si al minimizar nuestra función que 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 sabiendo 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 como debería ser nuestro código:

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

Vemos como 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.

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

Si ahora minimizaramos 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 eso 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 corresponde es el nombre de lo que queremos inyectar en la función del controlador.

Al inyectar objetos en el controlador (o cualquier otra función en la que AngularJS inyecte valores , recuerda siempre pasar un array con el nombre de lo que hay que inyectar y como último parámetro la función , en vez de pasar únicamente la función.

Es necesario hacerlo siempre así ya que nunca sabes si alguien va a querer minimizar tu código JavaScript.

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 ]

Referencias

1) Solo hay una excepción y es el servicio para crear ventanas de diálogo o modales
unidades/03_servicios/01_servicios.1406195422.txt.gz · Última modificación: 2014/07/24 11:50 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