Rumah > Artikel > hujung hadapan web > Penjelasan terperinci mengenai mekanisme suntikan pergantungan dalam AngularJS_AngularJS

Penjelasan terperinci mengenai mekanisme suntikan pergantungan dalam AngularJS_AngularJS

WBOYasal: 2016-05-16 15:54:301104semak imbas

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

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

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

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

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");

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>

Keputusan

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

2015617111816048.jpg (560×240)

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Penjelasan terperinci tentang penggunaan arahan tersuai dalam AngularJS_AngularJSArtikel seterusnya：Penjelasan terperinci tentang penggunaan arahan tersuai dalam AngularJS_AngularJS

Artikel berkaitan

Lihat lagi