srcmini本文概述
AngularJS带有内置的依赖注入机制。它有助于你将应用程序划分为多种不同类型的组件，这些组件可以作为依赖项相互注入。
依赖注入是一种软件设计模式，用于指定组件如何获取其依赖关系。在这种模式下，为组件提供了相关性，而不是在组件内对其进行编码。
模块化应用程序可以更轻松地重用，配置和测试应用程序中的组件。以下是对象和组件的核心类型：
- 值
- Factory
- 服务
- 提供者
- 不变
这些对象和组件可以使用AngularJS Dependency Injection相互注入。
值
在AngularJS中，值是一个简单的对象。它可以是数字，字符串或JavaScript对象。它用于在运行和配置阶段在工厂，服务或控制器中传递值。
//define a module
var myModule = angular.module("myModule", []);
//create a value object and pass it a data.
myModule.value("numberValue", 100);
myModule.value("stringValue", "abc");
myModule.value("objectValue", { val1 : 123, val2 : "abc"} );在此，使用模块上的value（）函数定义值。第一个参数指定值的名称，第二个参数是值本身。工厂，服务和控制器现在可以通过名称来引用这些值。
注入价值
要将值注入到AngularJS控制器函数中，请在定义值时添加具有相同参数的参数。
var myModule = angular.module("myModule", []);
myModule.value("numberValue", 100);
myModule.controller("MyController", function($scope, numberValue) {
console.log(numberValue);
});Factory
Factory是用于返回值的函数。当服务或控制器需要从工厂注入值时，它将按需创建值。它通常使用工厂函数来计算并返回值。
让我们来看一个示例，该模块在模块上定义一个工厂，并使用一个控制器来注入工厂创建的值：
var myModule = angular.module("myModule", []);
myModule.factory("myFactory", function() {
return "a value";
});
myModule.controller("MyController", function($scope, myFactory) {
console.log(myFactory);
});将价值注入工厂
要将值注入到AngularJS控制器函数中，请在定义值时添加具有相同参数的参数。
var myModule = angular.module("myModule", []);
myModule.value("numberValue", 100);
myModule.controller("MyController", function($scope, numberValue) {
console.log(numberValue);
});注意：不是注入的工厂功能，而是工厂功能产生的值。
服务
在AngularJS中，服务是一个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中，provider在配置阶段（AngularJS自我引导的阶段）内部用于创建服务，工厂等。这是你可以创建的最灵活的工厂形式。 Provider是带有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;
};
});
});常数
你不能将值注入module.config（）函数。相反，常量用于在配置阶段传递值。
mainApp.constant("configParam", "constant value");让我们以一个示例来部署上述所有指令。
<!DOCTYPE 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" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/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", 10);
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>
评论前必须登录！
注册