AngularJS 依赖注入

L'injection de dépendance est une conception de logiciel où les composants sont fournis avec des relations plutôt que de les coder directement dans les composants. Cela permet aux composants de ne pas rechercher leurs dépendances et rend les dépendances configurables. Cela aide également à rendre les composants réutilisables, maintenables et testables.

AngularJS fournit un mécanisme de dépendance injection de niveau supérieur. Il fournit les composants suivants, qui peuvent être injectés en tant que dépendances les uns dans les autres.

Value
Factory
Service
Provider
Constant

Value - Valeur

La valeur est un simple objet JavaScript qui doit être transmis aux contrôleurs au stade de la configuration (le stade de la configuration est lorsque AngularJS se lance).

//定义模块
var mainApp = angular.module("mainApp", []);
//Créer un objet de valeur en tant que "defaultInput" et lui transmettre des données. "defaultInput" et lui transmettre des données.
mainApp.value("defaultInput",　5);
...
//Injeter la valeur en utilisant le nom "defaultInput" dans le contrôleur "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);
　　　}
});

Factory - Factory

La factory est une fonction utilisée pour retourner des valeurs. Chaque fois que le service ou le contrôleur en a besoin, elle crée les valeurs à la demande. Elle utilise généralement la fonction factory pour calculer et retourner des valeurs.

//定义模块
var mainApp = angular.module("mainApp", []);
//Créer une factory "MathService" qui fournit une méthode de multiplication pour retourner le produit de deux nombres.
mainApp.factory('MathService', function() {
　　　var factory = {};
　　　
　　　factory.multiply = function(a, b) {
　　　　　　return a　*　b
　　　}
　　　return factory;
});　
//Injeter la factory "MathService" dans le service pour utiliser la méthode de multiplication de la factory.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);
　　　}
});
...

Service - Service

Le service (Service) est un objet JavaScript singleton qui contient un ensemble de fonctionnalités pour exécuter certaines tâches. Utiliserservice()Définir le service et l'injecter dans le contrôleur.

//定义模块
var mainApp = angular.module("mainApp", []);
...
//Créer un service qui définit une méthode pour retourner le carré d'un nombre.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);　
　　　}
});
//将服务“CalcService”注入控制器"CalcController"
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);
　　　}
});

Provider

AngularJS内部使用提供程序在配置阶段创建服务，工厂等。以下脚本可用于创建我们之前创建的MathService。Provider是一种特殊的工厂方法，其get()方法用于返回value/service/factory。

//定义模块
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;
　　　　　　});
　　　});
});

Constant - 常量

考虑到在配置阶段无法使用值的事实，常量用于在配置阶段传递值。

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

在线示例

以下示例显示了所有上述指令的使用-

testAngularJS.htm

示例

<html>
　　　<head>
　　　　　　<title>AngularJS Dependency Injection</title>/title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2AngularJS-依赖注入应用示例/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>/p>
　　　　　　</div>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/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>

测试看看‹/›

输出结果

也可以在网络浏览器中打开testAngularJS.htm并查看结果。

AngularJS 自定义指令 AngularJS 服务(Service)

Tutoriel de base AngularJS