Suntikan pergantungan AngularJS


Apakah itu Dependency Injection

Penjelasan di wiki ialah: Dependency Injection (DI) ialah corak reka bentuk perisian di mana satu atau lebih Multiple dependencies (atau perkhidmatan) disuntik (atau diluluskan melalui rujukan) ke dalam objek berasingan (atau klien), dan kemudian menjadi sebahagian daripada keadaan klien.

Corak ini memisahkan penciptaan gelagat pergantungan sisi klien, yang menjadikan reka bentuk program digandingkan secara longgar dan mengikut prinsip penyongsangan pergantungan dan tanggungjawab tunggal. Berbeza secara langsung dengan corak pencari perkhidmatan, ia membolehkan pelanggan memahami cara pelanggan menggunakan sistem untuk mencari kebergantungan anda.

AngularJS menyediakan mekanisme suntikan pergantungan yang baik. 5 komponen teras berikut digunakan sebagai suntikan pergantungan:

nilai

  • kilang

  • perkhidmatan

  • pembekal

  • malar

    • nilai
Nilai ya Objek javascript mudah yang digunakan untuk menghantar nilai kepada pengawal (fasa konfigurasi): 

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

kilang

kilang ialah fungsi yang mengembalikan nilai. Dicipta apabila diperlukan oleh perkhidmatan dan pengawal.

Biasanya kami menggunakan fungsi kilang untuk mengira atau mengembalikan nilai. 

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

pembekal

Buat perkhidmatan, kilang, dsb. (fasa konfigurasi) melalui pembekal dalam AngularJS.

Pembekal menyediakan kaedah kilang get(), yang digunakan untuk mengembalikan nilai/perkhidmatan/kilang. 

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

malar

malar (malar) digunakan untuk menghantar nilai semasa fasa konfigurasi Ambil perhatian bahawa pemalar ini tidak tersedia semasa fasa konfigurasi. 

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

Contoh

Contoh berikut menyediakan demonstrasi mekanisme suntikan pergantungan di atas.

Instance

<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="//cdn.bootcss.com/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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

←
→