Latest web development tutorials

AngularJS injeção de dependência

O que é Injeção de Dependência

Explicação sobre o wiki são: injeção de dependência (Dependency Injection, abreviado DI) é um padrão de projeto de software, neste modo, um ou mais dependente (ou serviço) é injetado (ou passado por referência) para um independente objeto (ou cliente) e, em seguida, tornou-se parte do estado do cliente.

O modelo separa clientes confiam em si para criar um comportamento, o que torna a concepção do programa torna-se fracamente acoplada, e segue o princípio de inversão de dependência de um único e responsabilidades. Locator Service formação de padrão e uma comparação direta é que ele permite que o cliente para entender como os clientes usam o sistema para encontrar a dependência

Uma palavra --- nada que você não vêm para mim, eu vou te encontrar alguma coisa.

AngularJS fornecem um bom mecanismo para injeção de dependência. Os seguintes cinco componentes principais utilizados como injeção de dependência:

  • valor
  • fábrica
  • serviço
  • provedor
  • constante

valor

Valor é um simples objeto javascript, passar um valor para a (fase de configuração) controlador para: 

// 定义一个模块
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);
   }
});

fábrica

fábrica é uma função que retorna um valor. Criar e controlador no momento da necessidades de serviço.

Normalmente usamos para calcular ou valores de retorno da função de fábrica. 

// 定义一个模块
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);
   }
});
...

provedor

AngularJS criado por um prestador de serviços, fábrica, etc. (fase de configuração).

Provider fornece um get método de fábrica (), que retorna o valor / serviço / fábrica. 

// 定义一个模块
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;
      };
   });
});

constante

constante (constante) utilizada para passar os valores na fase de configuração, constante atenção a esta fase na configuração não está disponível. 

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

Exemplos

Os exemplos a seguir fornecem mais do que vários mecanismo de injeção de dependência demonstração. 

<html>
   
   <head>
      <meta charset="utf-8">
      <title>AngularJS  依赖注入</title>
   </head>
   
   <body>
      <h2>AngularJS 简单应用</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>结果: {{result}}</p>
      </div>
      
      <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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>

tente »