從模塊提及

前言 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

相關文章
相關標籤/搜索