AngularJS 依赖注入详解及示例代码
更新时间：2016年08月17日 15:26:46 作者：bbflys
本文主要介绍AngularJS 依赖注入的知识，这里整理了相关的基础知识，并附示例代码和实现效果图，有兴趣的小伙伴可以参考下
依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻一个组成部分，从定位的依赖，依赖配置。这有助于使组件可重用，维护和测试。
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>
结果
在Web浏览器打开textAngularJS.html。看到结果如下。
以上就是对AngularJS 依赖注入的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！
相关文章
本文给大家总结了一下在angular中给ng-repeat列表加上动画效果时所遇到的问题及解决方法，推荐给大家，希望大家能够喜欢。2016-02-02
下面小编就为大家带来一篇angularjs中回车键触发某一事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本文主要介绍AngularJS 表单,这里对AngularJS 表单知识做了详细整理介绍,希望能帮助有需要的小伙伴2016-07-07
AngularJS对动态增加的DOM实现ng-keyup事件示例
这篇文章主要介绍了AngularJS对动态增加的DOM实现ng-keyup事件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要给大家介绍了关于Angular利用HTTP POST下载流文件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-07-07
深究AngularJS中ng-drag、ng-drop的用法
本篇文章主要介绍了深究AngularJS中ng-drag、ng-drop的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了angularJS 中$attrs方法使用指南,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了Angular模版驱动表单的使用总结，本文实现了Angular支持表单的双向数据绑定，校验，状态管理，非常具有实用价值，需要的朋友可以参考下2018-05-05
本文主要介绍AngularJS 输入验证,这里对AngularJS 输入验证的资料做了整理,并附简单实例代码和效果图,有需要的小伙伴参考下2016-07-07
本篇文章主要介绍了ionic选择多张图片上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
最新评论