从模块说起

前言 angular使用起来确实方便，但读通源码能让你使用起来更得心应手，本人抽空将自己读源码时的经验分享给大家。

第一章 模块 angular的模块机制. angular中一个叫modules的对象。该对象存放所有定义的模块。 angular在创建injector的时候会将应用中所有依赖到的定义在模块中的factory会放到同一个容器（providerCache）中。 虽然最终都会在同一个容器里，这种module机制也方便了开发人员组织代码。

module 的数据结构如下 { require:Array , _runBlocks:Array., _configBlocks:Array. _invokeQueue:Array. }

1.创建模块 angular.module(moduleName:String,require:Array,[option(configFn)])可以创建一个模块。 该方法反返回一个 含有 factory ,service,controller等方法的对象。这些方法 有两个参数 fnName:string ,fn:function ,这些方法执行时会将参数中传过来的函数fn放入module的对应的队列中。而放入队里中的函数fn 以后怎样处理是已经决定了的 ，下表是module方法对应的处理方法 和 队列

functiontackle functionQueueprovider['$provider' ,provider]InvokeQueuefactory ['$provide', 'factory']InvokeQueueservice['$provide', 'service']InvokeQueuevalue['$provide', 'value']InvokeQueueconstant['$provide', 'constant']InvokeQueuedecorate['$provide', 'decorator']InvokeQueuefilter['$filterProvider', 'register']InvokeQueuecontroller['$controllerProvider', 'register']InvokeQueuedirective['$compileProvider', 'directive']InvokeQueuecomponent['$compileProvider', 'component']InvokeQueueconfig['$inject' ,'invoke' ]ConfigBlocksrunfunction(block){runBlocks.push(block)RunBlocks

继续上面的例子 aModule.factory('aServive' ,['$service',function($service){}]);

组装模块数据过程 依据上表factory方法传进的参数 最终实际处理该参数的方法是$provide.factory 先不着急 先存下这样的结构： var p = ['$provide', 'factory', ['aServive' ,['$service',function($service){}] ]; p包含的信息代表以后 会这样 $provide.factory（['aServive' ,['$service',function($service){}] ）处理。 依据上表factory对应 队列/块为 InvokeQueue _invokeQueue.push(p)

angular启动流程 ： angular在应用启动之前会先构建内部模块ng 1.构建模块

angularModule = setupModuleLoader(window); //angularModule = angular.module angularModule('ng', ['ngLocale'], ['$provide', function ngModule($provide) { $provide.provider({$$sanitizeUri: $$SanitizeUriProvider}); $provide.provider('$compile', $CompileProvider). directive({ a: htmlAnchorDirective, input: inputDirective, ... ngModelOptions: ngModelOptionsDirective }) .directive({ ngInclude: ngIncludeFillContentDirective }) .directive(ngAttributeAliasDirectives) .directive(ngEventDirectives); $provide.provider({ $anchorScroll: $AnchorScrollProvider, $animate: $AnimateProvider, ... $$cookieReader: $$CookieReaderProvider }); }] );

第三个参数configFn 是['$provide', function ngModule($provide){...} ] configFn 会使用config处理，实际处理函数是 $inject.invoke .

出现的最多的 $provider.provider ,那provider函数有怎样的作用呢， 实际作用是将passin参数组织成一定的结构放入 前文提到的 cacheProvider,下一章将详细介绍。

有了module数据结构，将来$inject就可以大展拳脚。

转载于:https://www.cnblogs.com/koushikan/p/5939175.html