Latest web development tutorials

AngularJS injection de dépendance

Qu'est-ce que l'injection de dépendance

Explication sur le wiki sont: l'injection de dépendance (Dependency Injection, en abrégé DI) est un modèle de conception de logiciels, dans ce mode, un ou plusieurs dépendants (ou service) est injecté (ou passé par référence) à un organisme indépendant Object (ou client), puis est devenu une partie de l'état du client.

Le modèle sépare les clients comptent sur elle-même pour créer un comportement, ce qui rend la conception du programme devient couplage lâche, et suit le principe d'inversion de dépendance des simples et des responsabilités. Locator Service formation de motif et une comparaison directe est qu'il permet au client de comprendre comment les clients utilisent le système pour trouver la dépendance

Un mot --- rien que vous ne venez pas à moi, je vais vous trouver quelque chose.

AngularJS fournissent un bon mécanisme pour l'injection de dépendance. Les cinq éléments de base suivants utilisés comme l'injection de dépendance:

  • valeur
  • usine
  • service
  • fournisseur
  • constant

valeur

La valeur est un objet javascript simple, passer une valeur à la commande (phase de configuration) à: 

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

usine

usine est une fonction qui retourne une valeur. Créer et contrôleur au moment des besoins de service.

Habituellement, nous utilisons pour calculer ou les valeurs de retour de la fonction usine. 

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

fournisseur

AngularJS créé par un service de fournisseur, une usine, etc. (phase de configuration).

Fournisseur fournit une méthode de fabrique get (), qui renvoie la valeur / services / usine. 

// 定义一个模块
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 (constant) utilisé pour transmettre des valeurs dans la phase de configuration, une attention constante à ce stade dans la configuration ne sont pas disponibles. 

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

Exemples

Les exemples suivants fournissent plus de plusieurs injection de dépendance mécanisme de démonstration. 

<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>

Essayez »