詳解AngularJS中的依賴注入機制_AngularJS
- WBOY原創
- 2016-05-16 15:54:301129瀏覽
依賴注入是一個在元件中給出的替代了硬的元件內的編碼它們的依賴關係的軟體設計模式。這減輕一個組成部分，從定位的依賴，依賴配置。這有助於使組件可重複使用，維護和測試。
AngularJS提供了一個至高無上的依賴注入機制。它提供了一個可注入彼此依賴下列核心元件。
- 值
- 工廠
- 服務
- 提供者
- 常數
值
值是簡單的JavaScript對象，它是用來將值傳遞過程中的配置相位控制器。
//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);
}
});
工廠
工廠是用來傳回函數的值。它根據需求創造值，每當一個服務或控制器需要。它通常使用一個工廠函數來計算並傳回對應值
//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);
}
});
...
服務
服務是一個單一的JavaScript包含了一組函數物件來執行某些任務。服務使用service()函數，然後注入到控制器的定義。
//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);
}
});
提供者
提供者所使用的AngularJS內部創建過程中配置階段的服務，工廠等(相AngularJS引導自身期間)。下面提到的腳本，可以用來創建，我們已經在前面建立MathService。提供者是一個特殊的工廠方法以及get()方法，用來傳回值/服務/工廠。
//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;
};
});
});
常數
常數用於透過配置相位值來考慮事實，值不能使用期間的配置階段被傳遞。
mainApp.constant("configParam", "constant value");
範例
下面的範例將展示上述所有指令。
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>
結果
在網頁瀏覽器開啟textAngularJS.html。看到結果如下。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn