AngularJS Inyección de dependencias

---

¿Qué es la inyección de dependencias?

La explicación en wiki es: la inyección de dependencias (Dependency Injection, abreviado DI) es un patrón de diseño de software en el que una o más dependencias (o servicios) se inyectan (o se pasan por referencia) a un objeto independiente (o cliente), y luego se convierten en parte del estado de ese cliente.

Este patrón separa la creación del comportamiento del cliente de sus dependencias, lo que hace que el diseño del programa esté débilmente acoplado y siga los principios de inversión de dependencias y responsabilidad única. En contraste directo con el patrón de localizador de servicios, permite al cliente conocer cómo usa el sistema para encontrar dependencias.

En una frase: no vengas a buscarme si no pasa nada; si hay algo, yo iré a buscarte.

AngularJS proporciona un buen mecanismo de inyección de dependencias. Los siguientes 5 componentes centrales se utilizan como inyección de dependencia:

• value
• factory
• service
• provider
• constant

---

value

Value es un objeto simple de JavaScript que se utiliza para pasar valores al controlador (fase de configuración):

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...

// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

---

factory

factory es una función que se utiliza para devolver un valor. Se crea cuando service y controller lo necesitan.

Normalmente usamos la función factory para calcular o devolver valores.

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

---

provider

En AngularJS, se crea un service, factory, etc. a través de provider (fase de configuración).

Provider proporciona un método factory get(), que se utiliza para devolver value/service/factory.

// 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

---

constant

constant (constante) se utiliza para pasar valores en la fase de configuración; observe que esta constante no está disponible en la fase de configuración.

mainApp.constant("configParam", "constant value");

---

Ejemplo

Los siguientes ejemplos proporcionan una demostración de los mecanismos de inyección de dependencias mencionados anteriormente.

Otras extensiones