AngularJS Injektion Abhängigkeit
Was ist Dependency Injection
Erklärung im Wiki sind: Dependency Injection (Dependency Injection, abgekürzt DI) ist ein Software-Entwurfsmuster, in diesem Modus eine oder mehrere abhängige (oder Dienstleistung) injiziert wird (oder als Referenz übergeben) an einen unabhängigen Object (oder Client), und dann wurde ein Teil des Client-Zustand.
Das Modell trennt Kunden auf sich selbst verlassen, ein Verhalten zu schaffen, die das Programm-Design macht wird lose gekoppelt und folgt dem Dependency Inversion Prinzip der Einzel und Verantwortlichkeiten. Service Locator Musterbildung und ein direkter Vergleich ist, dass es den Kunden zu verstehen können, wie Kunden das System nutzen, um die Abhängigkeit zu finden
Ein Wort --- nichts, was du nicht zu mir kommen, ich werde Sie etwas finden.
AngularJS bieten einen guten Mechanismus für Dependency Injection. Die folgenden fünf Kernkomponenten wie Dependency Injection verwendet:
- Wert
- Fabrik
- Service
- Versorger
- konstante
Wert
Der Wert ist ein einfaches Javascript-Objekt, übergeben Sie einen Wert an die Steuerung (Konfigurationsphase):
// 定义一个模块
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);
}
});
Fabrik
Fabrik ist eine Funktion, die einen Wert zurückgibt. Erstellen und Controller zum Zeitpunkt der Servicebedarf.
Normalerweise verwenden wir zur Berechnung oder Factory-Funktion Rückgabewerte.
// 定义一个模块
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);
}
});
...
Versorger
AngularJS von einem Provider-Service, Fabrik usw. (Projektierungsphase) erstellt.
Provider stellt eine Factory-Methode get (), die den Wert / service / Fabrik zurück.
// 定义一个模块
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;
};
});
});
konstante
Konstante (Konstante) verwendet, um Werte in der Konfigurationsphase passieren, ständige Aufmerksamkeit in der Konfiguration zu diesem Zeitpunkt nicht zur Verfügung.
mainApp.constant("configParam", "constant value");
Beispiele
Die folgenden Beispiele stellen mehr als mehrere Dependency Injection-Mechanismus Demonstration.
<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>