AngularJS - injeção de dependência

A injeção de dependência é um projeto de software no qual os componentes recebem suas dependências, em vez de codificá-las no componente. Ele evita que um componente localize a dependência e torna as dependências configuráveis. Também ajuda a tornar os componentes reutilizáveis, passíveis de manutenção e testáveis.

O AngularJS fornece um mecanismo de injeção de dependência supremo. Ele fornece os seguintes componentes principais que podem ser injetados uns nos outros como dependências.

Value
Factory
Service
Provider
Constant

Valor

Value é um objeto JavaScript simples, que é necessário para passar valores ao controlador durante a fase de configuração (a fase de configuração é quando o AngularJS se autoinicializa).

//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 é uma função usada para retornar o valor. Ele cria um valor sob demanda sempre que um serviço ou controlador exige. Ele geralmente usa uma função de fábrica para calcular e retornar o 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);
   }
});
...

Serviço

Serviço é um objeto JavaScript singleton que contém um conjunto de funções para realizar certas tarefas. O serviço é definido usando a função service () e é então injetado nos 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);
   }
});

Fornecedor

Provider é usado pelo AngularJS internamente para criar serviços, fábrica, etc. durante a fase de configuração. O script a seguir pode ser usado para criar o MathService que criamos anteriormente. Provider é um método de fábrica especial com o método get () que é usado para retornar o valor / serviço / 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

As constantes são usadas para passar valores na fase de configuração, considerando o fato de que o valor não pode ser usado durante a fase de configuração.

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

Exemplo

O exemplo a seguir mostra o uso de todas as diretivas mencionadas acima -

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>

Resultado

Abra testAngularJS.htm em um navegador da web e veja o resultado.