AngularJS - Inyección de dependencia

La inyección de dependencias es un diseño de software en el que los componentes reciben sus dependencias en lugar de codificarlas dentro del componente. Libera a un componente de localizar la dependencia y hace que las dependencias sean configurables. También ayuda a hacer que los componentes sean reutilizables, mantenibles y probables.

AngularJS proporciona un mecanismo de inyección de dependencia supremo. Proporciona los siguientes componentes principales que se pueden inyectar entre sí como dependencias.

Value
Factory
Service
Provider
Constant

Valor

Value es un objeto JavaScript simple, que se requiere para pasar valores al controlador durante la fase de configuración (la fase de configuración es cuando AngularJS se inicia).

//define a module
var mainApp = angular.module("mainApp", []);

//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...

//inject the value in the controller using its name "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);
   }
});

Fábrica

Factory es una función que se utiliza para devolver valor. Crea un valor bajo demanda siempre que un servicio o un controlador lo requiera. Generalmente utiliza una función de fábrica para calcular y devolver el valor.

//define a module
var mainApp = angular.module("mainApp", []);

//create a factory "MathService" which 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;
}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

Servicio

El servicio es un objeto JavaScript único que contiene un conjunto de funciones para realizar determinadas tareas. El servicio se define mediante la función service () y luego se inyecta en los controladores.

//define a module
var mainApp = angular.module("mainApp", []);
...

//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a); 
   }
});

//inject the service "CalcService" into the controller
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);
   }
});

Proveedor

Provider es utilizado por AngularJS internamente para crear servicios, fábrica, etc. durante la fase de configuración. El siguiente script puede usarse para crear MathService que creamos anteriormente. Provider es un método de fábrica especial con el método get () que se utiliza para devolver el valor / servicio / fábrica.

//define a module
var mainApp = angular.module("mainApp", []);
...

//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

Constante

Las constantes se utilizan para pasar valores en la fase de configuración teniendo en cuenta el hecho de que el valor no se puede utilizar durante la fase de configuración.

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

Ejemplo

El siguiente ejemplo muestra el uso de todas las directivas mencionadas anteriormente:

testAngularJS.htm

<html>
   <head>
      <title>AngularJS Dependency Injection</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>Enter a number: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>Result: {{result}}</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.config(function($provide) {
            $provide.provider('MathService', function() {
               this.$get = function() {
                  var factory = {};
                  
                  factory.multiply = function(a, b) {
                     return a * b;
                  }
                  return factory;
               };
            });
         });
			
         mainApp.value("defaultInput", 5);
         
         mainApp.factory('MathService', function() {
            var factory = {};
            
            factory.multiply = function(a, b) {
               return a * b;
            }
            return factory;
         });
         mainApp.service('CalcService', function(MathService) {
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
         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);
            }
         });
      </script>
      
   </body>
</html>

Salida

Abra testAngularJS.htm en un navegador web y vea el resultado.

↰ Previous page Next page ↱