前言 angular使用起来确实方便,但读通源码能让你使用起来更驾轻就熟,本人抽空将本身读源码时的经验分享给你们。html
第一章 模块
angular的模块机制.
angular中一个叫modules的对象。该对象存放全部定义的模块。
angular在建立injector的时候会将应用中全部依赖到的定义在模块中的factory会放到同一个容器(providerCache)中。 虽然最终都会在同一个容器里,这种module机制也方便了开发人员组织代码。数组
module 的数据结构以下
{
require:Array ,
_runBlocks:Array.,
_configBlocks:Array.
_invokeQueue:Array.
}cookie
1.建立模块
angular.module(moduleName:String,require:Array,[option(configFn)])能够建立一个模块。
该方法反返回一个 含有 factory ,service,controller等方法的对象。这些方法 有两个参数 fnName:string ,fn:function ,这些方法执行时会将参数中传过来的函数fn放入module的对应的队列中。而放入队里中的函数fn 之后怎样处理是已经决定了的 ,下表是module方法对应的处理方法 和 队列数据结构
function | tackle function | Queue |
---|---|---|
provider | ['$provider' ,provider] | InvokeQueue |
factory | ['$provide', 'factory'] | InvokeQueue |
service | ['$provide', 'service'] | InvokeQueue |
value | ['$provide', 'value'] | InvokeQueue |
constant | ['$provide', 'constant'] | InvokeQueue |
decorate | ['$provide', 'decorator'] | InvokeQueue |
filter | ['$filterProvider', 'register'] | InvokeQueue |
controller | ['$controllerProvider', 'register'] | InvokeQueue |
directive | ['$compileProvider', 'directive'] | InvokeQueue |
component | ['$compileProvider', 'component'] | InvokeQueue |
config | ['$inject' ,'invoke' ] | ConfigBlocks |
run | function(block){runBlocks.push(block) | RunBlocks |
继续上面的例子
aModule.factory('aServive' ,['$service',function($service){}]);ide
组装模块数据过程
依据上表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.构建模块ui
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 .code
出现的最多的 $provider.provider ,那provider函数有怎样的做用呢, 实际做用是将passin参数组织成必定的结构放入 前文提到的 cacheProvider,下一章将详细介绍。component
有了module数据结构,未来$inject就能够大展拳脚。htm