En artículos anteriores ya hemos visto cómo trabajar con controladores y ámbitos y cómo añadirles eventos. En este artículo vamos a ver cómo podemos comunicar esos controladores mediante la inyección de dependencias.

Para ello vamos a ver ciertos elementos de AngularJS (value, factory y service) que nos van a ayudar a publicar valores y funciones para “inyectarlas” a los diferentes controladores.

Preparación del ejemplo

Para las opciones que vamos a ver en este artículo voy a tomar como base el siguiente código. Básicamente es una página con el módulo AppGatos declarado con dos controladores. Por cada controlador vamos a tener un div que mostrará ciertos datos, un campo de texto y un botón al que le iremos asignando funcionalidad en cada acción:

Por lo tanto si ejecutamos esta página veremos que de momento sólo contamos con el $scope de cada uno de los controladores y, al ejecutar la acción, cada actualización será independiente entre los controladores.

Inyección Implícita vs Explícita

A partir de ahora vamos a empezar a jugar con la Inyección de Dependencias. En el código base, sin embargo, ya hemos empezado a utilizarla. El sistema es el siguiente: Los módulos de AngularJS van a exponer una serie de elementos que pueden ser “reclamados” o no por otros módulos de AngularJS.

En el código base que estamos utilizando ya estamos reclamando el objeto $scope. Y en este caso hemos utilizado la Inyección Implícita, ya que obtenemos el objeto mediante el nombre de variable:

En principio no hay mucho problema en utilizar este sistema (de hecho voy a utilizar el sistema implícito en este artículo) pero puede haber problema si estamos utilizando alguna tecnología que minimice el código. Por ejemplo, en vez de $scope, lo puede transformar en a, por lo tanto ya no reconoce el objeto $scope expuesto. Para solucionarlo lo más recomendable es utilizar la Inyección Explícita, que se basa en declarar un array donde se especifica por String los elementos que vamos a inyectar en el mismo orden en el que los necesitamos en la declaración de la función:

Value

El elemento value sirve para declarar valores  que utilizarán los controladores y se declara durante la configuración

Factory

Factory es una función que devuelve un objeto con sus atributos y funciones. Devuelve ese objeto cada vez que un controlador o un servicio lo pide. Lo que se devuelve en un factory es un objeto con todos los elementos del factory.

El objeto se crea al declarar el factory y es compartido por los servicios y controladores.

Service

Service es un objeto Javascript que contiene un conjunto de funciones que realizan ciertas tareas. Puede ser inyectado en un controlador o en otro servicio.

A diferencia de Factory, se crea un nuevo objeto cada vez que se inyecta en un controlador o en un servicio.

Con esto hemos visto una pequeña introducción a la Inyección de Dependencias, en otro artículo crearé un módulo completo de AngularJS para ver cómo aplicar todo lo que hemos visto hasta ahora.

¡Hasta la próxima!

Rupert.