大佬教程收集整理的这篇文章主要介绍了AngularJs 入门（二）--模块，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
模块是指写Angular应用的代码片段，这样可以使代码分离开来，因此代码会更好维护，可读和测试。还可以在module里定义代码依赖关系，可以调用一个模块，再在代码中定义这个模块依赖于另外两个。
angular.module("MetronicApp")
.controller('AppController',['$scope','$rootScope','AppCommonservice','Dictservice',function ($scope,$rootScope,AppCommonservice,DictservicE) {
// code
});
}]);
AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数,第一个是模块的名称，第二个是依赖列表,也就是可以被注入到模块中的对象列表。
同名模块
已经初始化的angular模块保存在一个叫modules的缓存对象中，key是模块名，value是模块对象。所以，定义一个同名的模块，等于覆盖之前的模块。
angular模块只保留服务的定义，现在再来理解服务是如何加入注入器的。
模块定义服务、服务提供商； 注入器根据模块依赖关系加载模块，实例化所有服务提供商； 应用需要服务，注入器根据服务名寻找服务提供商，服务提供商实例化服务。
以上只是理论，现在从代码层面来看Angular是如何实现的。
每个angular模块内置有三个数组，invokeQueue保存如何注入服务提供商和值的信息；configBlocks保存模块的配置信息；runBlocks保存这个模块的执行信息。模块被使用的时候，注入器根据invokeQueue中的信息，实例化服务提供商；根据configBlocks中的信息对服务提供商做一些额外的处理；根据runBlocks中提供的信息，调用前面的服务提供商提供的服务执行模块需要完成的工作。
angular模块提供了很多方法来填充这三个数组，比如Config()、run()等。三个数组的元素也是数组，具体元素格式参考后面的说明。
以下是源码，可以清楚看到每个模块所要依赖的服务和运行机制，稍后详细介绍。
var angular = ensure(window,'angular',Object); angular.$$minerr = angular.$$minerr || minerr; return ensure(angular,'module',function() { var modules = {}; return function module(name,configFn) { var assertNotHasOwnProperty = function(name,context) { if (name === 'hasOwnProperty') { throw ngminerr('badname','hasOwnProperty is not a valid {0} name',context); } }; assertNotHasOwnProperty(name,'module'); if (requires && modules.hasOwnProperty(Name)) { modules[name] = null; } return ensure(modules,name,function() { if (!requires) { throw $injectorminerr('nomod',"Module '{0}' is not available! You either misspelled " + "the module name or forgot to load it. If registering a module ensure that you " + "specify the dependencies as the second argument.",Name); } /** @type {!Array.<Array.<*>>} */ var invokeQueue = []; /** @type {!Array.<Function>} */ var configBlocks = []; /** @type {!Array.<Function>} */ var runBlocks = []; var config = invokelater('$injector','invoke','push',configBlocks); /** @type {angular.ModulE} */ var moduleInstance = { // Private state _invokeQueue: invokeQueue,_configBlocks: configBlocks,_runBlocks: runBlocks,requires: requires,name: name,provider: invokelaterAndSetModulename('$provide','provider'),factory: invokelaterAndSetModulename('$provide','factory'),service: invokelaterAndSetModulename('$provide','service'),value: invokelater('$provide','value'),constant: invokelater('$provide','constant','unshift'),decorator: invokelaterAndSetModulename('$provide','decorator'),animation: invokelaterAndSetModulename('$animateProvider','register'),filter: invokelaterAndSetModulename('$filterProvider',controller: invokelaterAndSetModulename('$controllerProvider',directive: invokelaterAndSetModulename('$compileProvider','directive'),config: config,run: function(block) { runBlocks.push(block); return this; } }; if (configFn) { config(configFn); } return moduleInstance; function invokelater(provider,method,insertMethod,queuE) { if (!queuE) queue = invokeQueue; return function() { queue[insertMethod || 'push']([provider,arguments]); return moduleInstance; }; } function invokelaterAndSetModulename(provider,method) { return function(recipename,factoryFunction) { if (factoryFunction && isFunction(factoryFunction)) factoryFunction.$$modulename = name; invokeQueue.push([provider,arguments]); return moduleInstance; }; } }); };
});
数组元素为[‘provider’,‘method’,arguments]。
举例– 添加一个Controller：
angular.module('ngAppDemo',[])
.controller('ngAppDemoController',function($scopE) {
$scope.a= 1;
$scope.b = 2;
});
这段代码等于：
invokeQueue.push(['$controllerProvider','register',['ngAppDemoController',function(){ //code }]]);
注入器根据这个信息，就会调用$controllerProvider的register方法注册一个ngAppDemoController。
元素格式为['$injector',arguments]。
模块的以下方法最后全部会返回模块实例本身，形成执行链。
在Angular中，服务可能是对象、方法、或者一个常量值。服务由服务提供商创建，而服务提供商由注入器统一管理。当我们需要某个服务的时候，注入器负责根据服务名寻找相应的服务提供商，然后由服务提供商的$get()生产工厂创建服务实例。因此，服务提供商必须有一个$get()方法，这个方法就是服务创建单例工厂。
背后原理：注入器中的Providers和services各自通过@L_152_5@map对象保存在缓存（分别对应providerCache和instanceCache）中，只不过Providers的key是servicename + “Provider”，而services的key是servicename。
服务提供商-Provider
Provider即服务提供商，必须有一个$get()方法，$get()的返回值是Provider在注入器中实际的服务。
注入器
创建注入器的方法只在bootstrap()方法中被调用过，也就是说，每一个angular应用对应一个注入器。
注入过程
注入器由angular.injector(modulesToLoad,isStrictDi)方法创建，在angular中其实为createInjector方法。参数modulesToLoad是数组，元素格式为以下之一：
‘module’，模块的名称。 [‘service1’,‘service2’,fn]。 fn，方法的返回值必须仍然是方法。
不是所有模块都是对象，如果模块本身是方法或者是数组（最后一个元素必须是方法），则运行这个方法、或数组的最后一个方法，相当于直接进入了第四步。
注入器与bootstrap的关系
创建注入器的方法在angular.js中只在bootstrap()方法中被调用过，也就是说，每一个angular应用对应一个注入器。
注入器方法
在providerCache中和instanceCache中分别内置有一个$injector对象，分别负责给模块注入服务提供商和为方法注入服务。一般我们只谈论instanceCache中的$injector对象，因为providerCache和它的$injector是私有的，只在Angular内部代码使用。
比如，执行模块调用队列、配置队列中的方法时注入的是服务提供商，而当调用运行队列中的方法时，注入的是服务。
$injector.invoke(fn,self,locals,serviceName)
执行方法fn。locals是可选参数，是对象，表示局部变量。self是fn中的this。
最后一个参数servicename是可选参数，表示在哪个服务中调用了fn方法，用于错误信息显示，没有处理逻辑。
$injector.instantiate(Type,serviceName)
l 如果参数Type为方法，根据Type的prototype创建一个实例（通过Object.create方法创建），如果Type是数组，使用最后一个元素的prototype。
l 参数Locals是当Type方法的参数出现在locals对象中的时候，取locals[arg]的值重新作为Type的参数。如果locals中没有，则等价于调用get(arg,serviceName)获取service作为新的参数。
实例化过程可以简单概括为
Type.apply(Object.create(Type.prototypE),locals[argName]|| get(argName,serviceName))。
注意：实例化出来的不一定是对象，也可能是方法。
最后一个参数servicename是可选参数，表示在哪个服务中实例化了Type，用于错误信息显示，没有处理逻辑。
$injector.get(name,caller)
参数name是服务的名称。参数caller也是字符串，表示调用这个服务的是哪个方法，用于错误信息提示，没有处理逻辑。
$injector.Annotate(fn,StrictDi )
返回数组，数组的元素是fn方法需要注入的依赖服务。
在严格模式下，方法的依赖注入必须使用显示的注解加入，也就是说通过fn.$injector能够获取这个方法的依赖注入。
方法Annotate()也可以接受数组，数组的最后一个参数一定是fn，前面的元素则是依赖。
$injector.has(Name)
检查该注入器中是否存在指定的服务。
Provider方法
注入器的providerCache中内置有一个$provider对象，这是注入器的默认服务提供商，$provider有六个固定的方法。这几个方法的作用主要是为注入器添加其他服务提供商。
注意：
以下所有方法的name参数不需要以“Provider”结尾，因为provider()方法会默认把这个后缀加上。 以下任何一个方法不做同名判断，因此，如果出现同名，后者将覆盖前者。
$provider.provide(name,provider)
参数provider可以是方法或数组，也可以是对象。
l 如果是方法，则是provider的构造函数。调用注入器的instantiate()方法，生成一个provider实例，并以name为key保存在注入器的providerCache中。
l 如果是数组，最后一个必须是provider的构造函数，前面的就是构造函数的参数名。之后的原理和provider是方法的情形相同。
l 如果是对象，说明这个provider已经被实例化了，只需有$get()方法即可。
$provider.factory(name,factoryFn,enforcE)
使用$provider.provide()一般需要定义一个Provider类，如果不想定义Provider类，而是直接定义服务工厂，就可以使用这个方法。
背后原理：首先生成一个匿名对象，这个对象的$get属性就是factoryFn（enforce为false的情况下），然后把这个匿名对象作为$provider.provide()方法的第二个参数。所以，factoryFn其实依然是绑定在一个provider上的。
$provider.service(name,constructor)
调用injector.instantiate()方法，利用参数constructor生成service实例，参数name是这个service的名称。
众所周知，service由provider提供，那这个方法是怎么回事？原理：Angular首先根据constructor生成一个factoryFn，然后调用$provider.factory(name,factoryFn)。所以其实还是生成了一个provider。
举例：
$provider.service('filter',constructor)
等于创建了一个filter服务实例，并且在providerCache中保存了一个名称为“filterProvider”的服务提供商。
$provider.value(name,value)
这个方法实际调用injector.factory(name,valueFn(value),falsE)方法实现。所以其实等于创建一个只提供值的服务提供商。
$provider.constant(name,value)
这个方法直接在providerCache中添加一个属性实现。
$provider.decorate(servicename,decorFn)
修改旧的服务，改为执行decorFn方法，并把servciename原来的服务作为一个参数，参数名为$delegate。等价于一个静态代理。
背后原理：首先根据sevicename找到Provider，然后修改provider的$get属性。
ngLocale - 本地化模块
angular.module('ngLocale',[]).provider('$locale',$LocaleProvider);
结果是invokeQueue.push(['$provide',['$locale',$LocaleProvider]]);
ng
angular.module('ng',['ngLocale']).config(['$provide',function(){}]);
结果是configBlocks.push(['$injector',['$provide',function(){}]])。
三个固定模块
每个使用bootstrap(element,modules,config)生成的应用，注入器中有三个固定的模块：
以上是大佬教程为你收集整理的AngularJs 入门（二）--模块全部内容，希望文章能够帮你解决AngularJs 入门（二）--模块所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。