AngularJS ketergantungan injeksi
Apa Dependency Injection
Penjelasan di wiki adalah: injeksi ketergantungan (Dependency Injection, disingkat DI) adalah pola desain perangkat lunak, dalam mode ini, satu atau lebih tergantung (atau layanan) disuntikkan (atau disahkan oleh referensi) untuk independen objek (atau klien), dan kemudian menjadi bagian dari negara klien.
model memisahkan klien bergantung pada dirinya sendiri untuk membuat perilaku, yang membuat desain program menjadi longgar digabungkan, dan mengikuti prinsip Ketergantungan Inversi tunggal dan tanggung jawab. pembentukan pola layanan Locator dan perbandingan langsung yang memungkinkan klien untuk memahami bagaimana klien menggunakan sistem untuk menemukan ketergantungan
Sebuah kata --- apa-apa Anda tidak datang ke saya, saya akan menemukan sesuatu.
AngularJS menyediakan mekanisme yang baik untuk injeksi ketergantungan. Berikut lima komponen inti yang digunakan sebagai injeksi ketergantungan:
- nilai
- pabrik
- layanan
- pemberi
- konstan
nilai
Nilai adalah objek javascript sederhana, lulus nilai ke controller (fase konfigurasi) ke:
// 定义一个模块
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);
}
});
pabrik
Pabrik adalah fungsi yang mengembalikan nilai. Membuat dan kontroler pada saat kebutuhan layanan.
Biasanya kita gunakan untuk menghitung atau nilai kembali fungsi pabrik.
// 定义一个模块
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);
}
});
...
pemberi
AngularJS dibuat oleh penyedia layanan, pabrik, dll (fase konfigurasi).
Provider menyediakan metode pabrik get (), yang mengembalikan nilai / layanan / pabrik.
// 定义一个模块
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;
};
});
});
konstan
konstan (konstan) digunakan untuk melewati nilai dalam tahap konfigurasi, perhatian konstan untuk tahap ini dalam konfigurasi tidak tersedia.
mainApp.constant("configParam", "constant value");
contoh
Contoh-contoh berikut menyediakan lebih dari beberapa injeksi ketergantungan mekanisme demonstrasi.
<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>