AngularJS：依赖注入
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS：依赖注入相关的知识，希望对你有一定的参考价值。
本文也同步发表在我的公众号“我的天空”
依赖注入
依赖注入不是AngularJS独有的概念，而是现代软件开发与架构的范畴，但是在AngularJS中“依赖注入”是其核心思想之一，所以我们专门来学习一下。
观察除“AngularJS路由”这节之前的控制器代码，发现我们把所有的业务逻辑都写在控制器代码部分，当代码规模小还好处理，随着代码规模扩大，这样的做法很快就会使代码变的难以维护，控制器将变成一个代码垃圾场，我们要做的所有东西都会倒在里面，它们会变的非常难以理解且难以修改。这种情况下，我们自然会想到代码分离，将功能类似的代码抽取出来单独写成一个模块，就像我们会将JS抽取出来写成一个个JS外部文件一样，使用的时候将其引入即可。
再来观察“AngularJS路由”这节的代码，我们引用模块的方式与之前有了显著的不同：
var app=angular.module("myApp",[‘ngRoute‘]);
对于angular.mmodule()方法的第二个参数，之前我们一直都是一个空数组，而在路由功能实现中，由于我们要依赖angular-route.min.js中的ngRoute模块来实现路由功能，因此将第二个参数设置为[‘ngRoute‘]，该数组参数就是放置我们所要依赖的其他模块名，如果我们要依赖多个模块，则继续将模块名添加到该数组中就可以了，类似[‘module1‘,‘module2‘...]。
当我们引用了依赖的ngRoute后，就可以使用$routeProvider了，利用其config（）函数来实现路由功能。期间我们并不需要调用任何函数去创建$routeProvider，我们也不用关心这个对象是如何生成的、其内部工作机制如何，只要拿来使用就够了，就像把$routeProvider注入到我们的代码里似的。再联想到我们一直使用的$scope、实现http服务的$http等对象都是贯彻了这一宗旨。因此通俗来说“依赖注入”就是在需要的时候把我们所依赖的模块功能注入到程序中。
接下来我们自己编写一个模块，并注入到程序中：
var app=angular.module("MathService",[])
app.factory(‘myMath‘,function(){
var my={};
my.add=function(a,b){
return a+b;
}
return my;
});
Math.js
<head>
<script src="Angular.js"></script>
<script src="Math.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctr">
{{result}}
</body>
<script>
var app=angular.module("myApp",[‘MathService‘]);
app.controller("ctr",function($scope,myMath){
$scope.result=myMath.add(1,21);
})
</script>
示例代码AngularJS_26.html
在Math.js中，我们首先定义了模块的名称为“MathService”，接下来使用factory()来定义“myMath”服务，事实上在AngularJS中的服务均为一个单例对象（即只会创建一个实例的对象），在该服务中实现了一个add()方法，返回两个数的和。
接下来看在示例26中如何使用这个模块。首先我们引入了Math.js。在模块声明中，我们将第二个参数的值设置为“[‘MathService‘]”，这个就是我们实现功能所要依赖的模块，接下来在控制器代码中，我们注入了myMath服务，并且使用myMath.add()方法，实现两数求和。
在AngularJS中，创建服务的方法除了factory()外，还有value()、provider()、service()和constant()等方法，其适用的范围及功能均有所不同，请自行查阅相关文档。
整个AngularJS系列就到此结束了，实际上该系列只是介绍了AngularJS的入门，把自己的学习过程写出来的而已。对于更深入的知识我和大家一样都需要继续再学习。
该系列的示例代码
https://github.com/panyongwow/angularJS
以上是关于AngularJS：依赖注入的主要内容，如果未能解决你的问题，请参考以下文章