Angular Module聲明和獲取重載


module是angular中重要的模塊組織方式,它提供了將一組內聚的業務組件(controller、service、filter、directive…)封裝在一起的能力。這樣做可以將代碼按照業務領域問題分module的封裝,然后利用module的依賴注入其關聯的模塊內容,使得我們能夠更好的”分離關注點“,達到更好的”高內聚低耦合“。”高內聚低耦合“是來自面向對象設計原則。內聚是指模塊或者對象內部的完整性,一組緊密聯系的邏輯應該被封裝在同一模塊、對象等代碼單元中,而不是分散在各處;耦合則指模塊、對象等代碼單元之間的依賴程度,如果一個模塊的修改,會影響到另一個模塊,則說明這兩模塊之間是相互依賴緊耦合的。

同時module也是我們angular代碼的入口,首先需要聲明module,然后才能定義angular中的其他組件元素,如controller、service、filter、directive、config代碼塊、run代碼塊等。

關於module的定義為:angular.module(‘com.ngbook.demo’, [])。關於module函數可以傳遞3個參數,它們分別為:

  1. name:模塊定義的名稱,它應該是一個唯一的必選參數,它會在后邊被其他模塊注入或者是在ngAPP指令中聲明應用程序主模塊;
  2. requires:模塊的依賴,它是聲明本模塊需要依賴的其他模塊的參數。特別注意:如果在這里沒有聲明模塊的依賴,則我們是無法在模塊中使用依賴模塊的任何組件的;它是個可選參數。
  3. configFn: 模塊的啟動配置函數,在angular config階段會調用該函數,對模塊中的組件進行實例化對象實例之前的特定配置,如我們常見的對$routeProvider配置應用程序的路由信息。它等同於”module.config“函數,建議用”module.config“函數替換它。這也是個可選參數。

對於angular.module方法,我們常用的方式有有種,分別為angular.module(‘com.ngbook.demo’, [可選依賴])和angular.module(‘com.ngbook.demo’)。請注意它是完全不同的方式,一個是聲明創建module,而另外一個則是獲取已經聲明了的module。在應用程序中,對module的聲明應該有且只有一次;對於獲取module,則可以有多次。推薦將angular組件獨立分離在不同的文件中,module文件中聲明module,其他組件則引入module,需要注意的是在打包或者script方式引入的時候,我們需要首先加載module聲明文件,然后才能加載其他組件模塊。

在angular中文社區群中,有時會聽見某些同學問關於”ng:areq“的錯誤:

 [ng:areq] Argument 'DemoCtrl' is not a function, got undefined!

這往往是因為忘記定義controller或者是聲明了多次module,多次聲明module會導致前邊的module定義信息被清空,所以程序就會找不到已定義的組件。這我們也能從angular源碼中了解到(來自loader.js):

function setupModuleLoader(window) {
            ...
            function ensure(obj, name, factory) {
                return obj[name] || (obj[name] = factory());
            }
            var angular = ensure(window, 'angular', Object);
            return ensure(angular, 'module', function() {
                var modules = {};
                return function module(name, requires, 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);
                        }
                        var invokeQueue = [];
                        var runBlocks = [];
                        var config = invokeLater('$injector', 'invoke');
                        var moduleInstance = {
                            _invokeQueue: invokeQueue,
                            _runBlocks: runBlocks,
                            requires: requires,
                            name: name,
                            provider: invokeLater('$provide', 'provider'),
                            factory: invokeLater('$provide', 'factory'),
                            service: invokeLater('$provide', 'service'),
                            value: invokeLater('$provide', 'value'),
                            constant: invokeLater('$provide', 'constant', 'unshift'),
                            animation: invokeLater('$animateProvider', 'register'),
                            filter: invokeLater('$filterProvider', 'register'),
                            controller: invokeLater('$controllerProvider', 'register'),
                            directive: invokeLater('$compileProvider', 'directive'),
                            config: config,
                            run: function(block) {
                                runBlocks.push(block);
                                return this;
                            }
                        };
                        if (configFn) {
                            config(configFn);
                        }
                        return moduleInstance;

                        function invokeLater(provider, method, insertMethod) {
                            return function() {
                                invokeQueue[insertMethod || 'push']([provider, method, arguments]);
                                return moduleInstance;
                            };
                        }
                    });
                };
            });
        }

在代碼中,我們能了解到angular在啟動時,會設置全局的angular對象,然后在angular對象上發布module這個API。關於module API代碼,能清晰的看見第一行謂語句,module名稱不能以hasOwnProperty命名,否則會拋出”badname“的錯誤信息。緊接着,如果傳入了name參數,其表示是聲明module,則會刪除已有的module信息,將其置為null。

從moduleInstance的定義,我們能夠看出,angular.module為我們公開的API有:invokeQueue、runBlocks、requires、name、provider、factory、servic、value、constant、animation、filter、controller、directive、config、run。其中invokeQueue和runBlocks是按名約定的私有屬性,請不要隨意使用,其他API都是我們常用的angular組件定義方法,從invokeLater代碼中能看到這類angular組件定義的返回依然是moduleInstance實例,這就形成了流暢API,推薦使用鏈式定義這些組件,而不是聲明一個全局的module變量。

最后,如果傳入了第三個參數configFn,則會將它配置到config信息中,當angular進入config階段時,它們將會依次執行,進行對angular應用或者angular組件如service等的實例化前的配置。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM