Penjelasan terperinci mengenai mekanisme suntikan pergantungan dalam AngularJS

Penjelasan terperinci mengenai mekanisme suntikan pergantungan dalam AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:54:30

asal

1123 orang telah melayarinya

Suntikan ketergantungan ialah corak reka bentuk perisian yang menggantikan pengekodan keras kebergantungan mereka dalam komponen dengan memberikannya dalam komponen. Ini melegakan satu komponen, daripada mencari kebergantungan, kepada konfigurasi kebergantungan. Ini membantu menjadikan komponen boleh digunakan semula, boleh diselenggara dan boleh diuji.

AngularJS menyediakan mekanisme suntikan pergantungan tertinggi. Ia menyediakan komponen teras berikut yang boleh menyuntik kebergantungan antara satu sama lain.

Nilai
Kilang
Perkhidmatan
Pembekal
Nilai malar

Nilai

Nilai ialah objek JavaScript mudah yang digunakan untuk menghantar nilai semasa pengawal fasa konfigurasi.

//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);
  }
});

Salin selepas log masuk

Kilang

Kilang digunakan untuk mengembalikan nilai fungsi. Ia mencipta nilai atas permintaan, apabila perkhidmatan atau pengawal memerlukannya. Ia biasanya menggunakan fungsi kilang untuk mengira dan mengembalikan nilai yang sepadan

//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); 
  }
});
...

Salin selepas log masuk

Perkhidmatan

Perkhidmatan ialah objek JavaScript tunggal yang mengandungi satu set fungsi untuk melaksanakan tugas tertentu. Perkhidmatan ditakrifkan menggunakan fungsi service(), yang kemudiannya disuntik ke dalam pengawal.

//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);
  }
});

Salin selepas log masuk

Pembekal

Perkhidmatan pembekal, kilang, dsb. yang digunakan semasa fasa konfigurasi proses penciptaan dalaman AngularJS (sepadan dengan apabila AngularJS bootstrap sendiri). Skrip yang dinyatakan di bawah boleh digunakan untuk mencipta MathService yang telah kami buat sebelum ini. Pembekal ialah kaedah kilang khas dan kaedah get() yang mengembalikan nilai/perkhidmatan/kilang.

//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;
   };
  });
});

Salin selepas log masuk

Malar

Pemalar digunakan untuk mengambil kira fakta bahawa nilai tidak boleh diluluskan semasa fasa konfigurasi dengan mengkonfigurasinya, dan nilai tidak boleh diluluskan semasa fasa konfigurasi.

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

Salin selepas log masuk

Contoh

Contoh berikut akan menunjukkan semua arahan di atas.
testAngularJS.html

<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" />
   <button ng-click="square()">X<sup>2</sup></button>
   <p>Result: {{result}}</p>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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>

Salin selepas log masuk

Keputusan

Buka textAngularJS.html dalam penyemak imbas web anda. Lihat hasilnya di bawah.

2015617111816048.jpg (560×240)