angular源码阅读，依赖注入的原理：injector,provider,module之间的关系。

最开始使用angular的时候，总是觉得它的依赖注入方式非常神奇。

如果你跳槽的时候对新公司说，我曾经使用过angular，那他们肯定会问你angular的依赖注入原理是什么？

这篇博客其实是angular源码阅读之路的一个必经站点，就是要理解injector,provider,module之间的关系——这关系其实就是依赖注入的本质。

那么请专注地看下面这一段话吧：

通俗一点的理解：

module是发布任务的BOSS。

injector是领取任务的中间人。

provider是真正去执行任务的马仔。

当然上面这一段话只是比喻，不太严谨，可是很形象。待我慢慢解释来。

如果你比较熟悉angular，那么你肯定知道在每一个module对象上，都有一个私有属性"_invokeQueue"。

这个_invokeQueue,其实就是module发布的任务。

怎么理解『_invokeQueue,其实就是module发布的任务。』这句话呢？请看下面的简单小代码。

当我执行下面这段语句，我会在myapp中创建一个全局变量name='不咬人的蚊子':

//注册了一个全局变量name='不咬人的蚊子'
angular.module('myapp').constant('name','不咬人的蚊子');

而这个变量'name'我可以在controller里面这样使用：

angular.module.controller('myctr',['$scope','name',function($scope,name){
    console.log(name)//不咬人的蚊子
    $scope.name  = name;
}])

现在说回_invokeQueue,当我执行了那个注册全局变量的constant方法的时候，其实是module发布了一个任务，这个任务保存在_invokeQueue里面。

注意：其实这时候只是发布任务，任务并没有被执行。这时候_invokeQueue里面是这样的：

module._invokeQueue=[
    ['constant',['name','不咬人的蚊子']]//数组里面包含着另一个数组。
]

对，没错，这就是Module发布的任务，invokeQueue其实就是一个数组，里面有着一系列任务（这里只是拿constant举例，其实在真实案例中，还会有各种任务，比如controller啊什么的）。

invokeQueue这个数组里面的每一个元素都是一个任务，如你所见，这任务也是一个数组。

任务数组的第1个元素（下标为0）记录了这个任务具体是什么任务，是constant，还是controller,还是directive等等。

任务数组的第2个元素（下标为1）记录了执行任务需要的参数。

注意注意，这里我们为了易于理解，只拿constant举例子，以后慢慢复杂起来，会越来越丰富。

注意注意，module发布了任务以后，只是发布了，并没有执行。

那么什么时候执行呢？

当angular一个app启动的时候，会自动生成一个injector，也就是大家口中的注射器，这是一个对象，这个injector对象会读取module中的各种任务。

比如injecotr读取module的invokeQueue之后，发现了第一条任务：

 ['constant',['name','不咬人的蚊子']]

于是injector就会发现，这是一个constant任务，参数是name,'不咬人的蚊子'。

injector并不能处理constant任务，所以它去找一个名为constant的provider，这个provider可以提供一个函数，这个函数正好接收两个参数。

于是injector把任务中的两个参数（也就是name和'不咬人的蚊子'这两个参数）交给constantProvider，让它来执行。

好了，这就是一个口头能讲明白的原理。那么angularJs是如何实现这个机制的呢？我打算把简单版的代码贴在下面，如果感兴趣的同学可以看看，如果不感兴趣的同学其实只要把上面的文字给看明白了，下面的代码随便看个乐呵就行。（这个代码可能会有部分是接着上一篇博客的代码，如果看着不知道怎么回事，可以看看上一篇博客。）　

setupModuleLoader.js

function setupModuleLoader(window){
	var ensure=function(obj,name,factory){
		return obj[name]||(obj[name]=factory())
	}
	var angular = ensure(window,'angular',Object);

	var createModule = function(name,requires){
		var invokeQueue=[];//增加一个任务队列
		var moduleInstance = {
			name:name,
			requires:requires,
			_invokeQueue:invokeQueue,
                        //constant方法的实质是向invokeQueue数组里面增加一个任务
			constant:function(key,value){
				invokeQueue.push(['constant',[key,value]])
			},
		};
		return moduleInstance;
	}

	ensure(angular,'module',function(){
		var modules={};
		return function(name,requires){
			if(requires){
				return createModule(name,requires,modules)
			}else{
				return getModule(name,modules);
			}
		}
	})
}

createInjector.js

//createInjector(['app1','app2'])
//参数是一个字符串或者一个数组，内容是module名
function createInjector(modulesToLoad){
	//cache用来缓存一些一直可以用到的值
	var cache={};

	$provide={
		constant:function(key,value){
			cache[key]=value;
		}
	}

	//这里的foreach方法并不是一个真正能运行的foreach,能看懂就行了
	//每次APP启动的时候，injector都会按照传入的module名来遍历所有module
	//这样就可以得到所有module发布的任务，并且一一执行这些任务
	$.forEach(modulesToLoad,function(moduleName){
		var module = window.angular.module(moduleName);
		$.forEach(module._invokeQueue,function(invokeArgs){
			var method=invokeArgs[0];
			var args = invokeArgs[1];
			$provide[method].apply($provide,args);
		})
	})
	return {
		has:function(key){
			return cache.hasOwnProperty(key)
		},
		get:function(key){
			return cache[key]
		}
	}
}

如果你耐着性子看到了这里，并且思路还算清晰，那么你肯定会问，现在injector执行了所有任务，并且把一切东西都准备好了，那么我们使用这些数据的途径和方法是什么呢？哈哈，这个别急，很快会解释明白，但是现在起码我们对依赖注入有了一个很好的理解了不是么？冬天来了，春天不会远了。