🔛 🏠 🦌 AngularJS में ऑन-डिमांड मॉड्यूल लोड हो रहा है 👼🏿 ⛪️ 🚶

यदि आप जल्दी में हैं: हाँ, AngularJS में मॉड्यूल को लोड करने में देरी संभव है, और आप इसके लिए आवश्यक कोड देख सकते हैं।

क्या AngularJS किसी भी तरह से आलसी लोडिंग का समर्थन नहीं करता है?

AngularJS फ्रंट एंड डेवलपमेंट के लिए सबसे अच्छे टेम्पलेट्स में से एक है, लेकिन यह अभी भी युवा है और इसमें कई महत्वपूर्ण विशेषताओं (जो एक अच्छा राउटर?) का अभाव है।
जबकि इनमें से अधिकांश सुविधाओं को मॉड्यूल के रूप में जोड़ा जा सकता है जो कि Google या विशेष वेबसाइटों पर पाया जा सकता है, कुछ विशेषताएं हैं जिन्हें इस तरह से नहीं जोड़ा जा सकता है।
वर्तमान में, कई लोगों को मॉड्यूल के अतुल्यकालिक लोडिंग की आवश्यकता होती है, और ऐसा लगता है कि Google इसे फ्रेमवर्क के दूसरे संस्करण में लागू करने जा रहा है, लेकिन कौन जानता है कि यह कब होगा ...

मैं अब ऐसा करने का रास्ता ढूंढ रहा हूं क्योंकि मैं अपने आवेदन का अनुकूलन करना चाहता हूं और इसके लोडिंग समय को तेज करना चाहता हूं।
मुझे दो बहुत ही रोचक लेख मिले (अंग्रेजी में): एंगुलरजेएस में लोड करने में देरी और रिक्जेस्ट का उपयोग करके एप्लिकेशन शुरू करने के बाद एंगुलरजेएस घटकों को लोड करना ।
लेकिन दोनों ने नियंत्रकों, सेवाओं, फ़िल्टर, निर्देशों के विलंबित लोडिंग की व्याख्या की, लेकिन मॉड्यूलों के विलंबित लोडिंग की नहीं।
मैंने लोडिंग मॉड्यूल के लिए समर्पित कोणीय स्रोत कोड का अध्ययन करने का फैसला किया (आप इसे यहां देख सकते हैं), और मैंने देखा कि मॉड्यूल का पंजीकरण आरंभीकरण के बाद होता है, लेकिन नए लोड किए गए मॉड्यूल और उनकी निर्भरता बस एप्लिकेशन से कनेक्ट नहीं होती है और प्रारंभ नहीं करती है।

रुको, क्या तुम इसे स्वयं नहीं कर सकते?

खैर हाँ, बेशक यह किया जा सकता है! हमें केवल यह सुनिश्चित करना होगा कि हमने जो मॉड्यूल जोड़ा है वह पहले आवेदन में नहीं जोड़ा गया है, क्योंकि हमें मौजूदा कोड को फिर से लिखने की कोई इच्छा नहीं है। कल्पना करें कि आपको एक ऐसी सेवा की आवश्यकता है जिसे पहले ही डाउनलोड और कॉन्फ़िगर किया जा चुका है, यह बहुत तेज़ी से काम करना बंद कर देगा क्योंकि यदि आप इसे फिर से लिखना चाहते हैं।
तो, हमें पहले से लोड किए गए मॉड्यूल की एक सूची की आवश्यकता है, जिसे ढूंढना आसान होना चाहिए, है ना?
खैर ... हाँ ... वास्तव में ... नहीं।
यदि आप स्रोत कोड को देखते हैं, तो आपको वहां एक आंतरिक चर मिलेगा जिसे modules कहा जाता है। इस चर का उपयोग सभी लोड किए गए मॉड्यूल की एक सूची को संग्रहीत करने के लिए किया जाता है, और यह बाहर से सुलभ नहीं है।

इसलिए हमें मॉड्यूल की सूची नहीं मिल सकती है?

नहीं, हम नहीं कर सकते। लेकिन हम इसे फिर से बना सकते हैं।
हम मौजूदा मॉड्यूल को प्राप्त करने के लिए किसी भी समय angular.module('moduleName') उपयोग कर सकते हैं। यदि आप लॉग में इसके परिणाम को आउटपुट करते हैं, तो आप संपत्ति को नोटिस करेंगे: _invokeQueue । यह इसकी निर्भरता की एक सूची है।
चूंकि मॉड्यूल केवल शुरुआत में लोड किया जा सकता है और एप्लिकेशन को केवल ng-app डायरेक्टिव का उपयोग करके लॉन्च किया जा सकता है, यदि आप एप्लिकेशन मॉड्यूल पा सकते हैं, तो आप लोड किए गए मॉड्यूल और उनकी निर्भरता की पूरी सूची प्राप्त कर सकते हैं।
अनुवादक का ध्यान दें: वास्तव में, एप्लिकेशन को एनजी-ऐप निर्देश के बिना शुरू किया जा सकता है, लेकिन इस मामले में यह कोई फर्क नहीं पड़ता।
आप निम्न कोड के साथ ऐसा कर सकते हैं:

 function init(element) { var elements = [element], appElement, module, names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'], NG_APP_CLASS_REGEXP = /\sng[:\-]app(:\s*([\w\d_]+);?)?\s/; function append(elm) { return (elm && elements.push(elm)); } angular.forEach(names, function(name) { names[name] = true; append(document.getElementById(name)); name = name.replace(':', '\\:'); if(element.querySelectorAll) { angular.forEach(element.querySelectorAll('.' + name), append); angular.forEach(element.querySelectorAll('.' + name + '\\:'), append); angular.forEach(element.querySelectorAll('[' + name + ']'), append); } }); angular.forEach(elements, function(elm) { if(!appElement) { var className = ' ' + element.className + ' '; var match = NG_APP_CLASS_REGEXP.exec(className); if(match) { appElement = elm; module = (match[2] || '').replace(/\s+/g, ','); } else { angular.forEach(elm.attributes, function(attr) { if(!appElement && names[attr.name]) { appElement = elm; module = attr.value; } }); } } }); if(appElement) { (function addReg(module) { if(regModules.indexOf(module) === -1) { regModules.push(module); var mainModule = angular.module(module); angular.forEach(mainModule.requires, addReg); } })(module); } }

नए मॉड्यूल का पंजीकरण

अब जब हमारे पास पहले से लोड किए गए मॉड्यूलों की एक सूची है, तो हम नए मॉड्यूल जोड़ सकते हैं (केवल उन जो पहले डाउनलोड नहीं किए गए हैं)।
ऐसा करने के लिए, हमें यह समझने की जरूरत है कि कैसे मॉड्यूल और निर्भरता को कोणीय में कहा जाता है।
जैसे ही मॉड्यूल पंजीकृत होता है, इसकी सभी निर्भरताएं ("आरंभीकरण" चरण) में लोड हो जाती हैं, जो कि इनिशियलाइज़ेशन के परिणामस्वरूप मॉड्यूल में जुड़ जाती हैं। यदि कोई निर्भरता पहले से ही स्मृति में मौजूद है, तो आरंभीकरण चरण को छोड़ दिया जाएगा और मौजूदा निर्भरता का एक लिंक मॉड्यूल में जोड़ा जाएगा।
एक मॉड्यूल कॉन्फ़िगरेशन और निष्पादन चरणों के माध्यम से जा सकता है।
कॉन्फ़िगरेशन चरण निर्भरताएँ लोड करने से पहले किया जाता है।
निष्पादन चरण कॉन्फ़िगरेशन चरण और सभी आवश्यक निर्भरताओं के पूर्ण भार के बाद ही शुरू होता है। आप _runBlocks पैरामीटर में निष्पादन चरण कोड देख सकते हैं।
निष्पादन चरण शुरू करने के लिए, हम $injector सेवा के आह्वान कार्य का उपयोग करेंगे।
इसलिए, अंत में, हम सभी निर्भरताओं की एक सूची बनाएंगे, हम कॉन्फ़िगरेशन और निष्पादन चरणों को ट्रैक करेंगे, और उन्हें सही क्रम में कॉल करेंगे।
वास्तव में, हम अपने मॉड्यूल को लोड करने के तरीके को पुन: उत्पन्न करेंगे, जिसे आप स्रोत कोड से सीख सकते हैं।
परिणाम निम्न फ़ंक्शन में दिखाया गया है:

 function register(providers, registerModules, $log) { var i, ii, k, invokeQueue, moduleName, moduleFn, invokeArgs, provider; if(registerModules) { var runBlocks = []; for(k = registerModules.length - 1; k >= 0; k--) { moduleName = registerModules[k]; regModules.push(moduleName); moduleFn = angular.module(moduleName); runBlocks = runBlocks.concat(moduleFn._runBlocks); try { for(invokeQueue = moduleFn._invokeQueue, i = 0, ii = invokeQueue.length; i < ii; i++) { invokeArgs = invokeQueue[i]; if(providers.hasOwnProperty(invokeArgs[0])) { provider = providers[invokeArgs[0]]; } else { return $log.error("unsupported provider " + invokeArgs[0]); } provider[invokeArgs[1]].apply(provider, invokeArgs[2]); } } catch(e) { if(e.message) { e.message += ' from ' + moduleName; } $log.error(e.message); throw e; } registerModules.pop(); } angular.forEach(runBlocks, function(fn) { providers.$injector.invoke(fn); }); } return null; }

लेकिन सावधान रहें, निर्भरता दर्ज करते समय, हमें सही प्रदाता का उपयोग करने की आवश्यकता है। निर्देश को पंजीकृत करते समय हम सेवा प्रदाता का उपयोग नहीं करना चाहते हैं।

हमारी सेवा लिखिए

प्रत्येक प्रदाता और इंजेक्टर कॉन्फ़िगरेशन और आरंभीकरण चरणों में उपलब्ध है। अगर हम उन्हें बाद में उपयोग करना चाहते हैं तो हमें उनसे एक लिंक रखना होगा।
हमें लोड किए गए मॉड्यूल को ट्रैक करने की भी आवश्यकता है ताकि उन्हें फिर से लोड करने से रोका जा सके।
मैं अपना खुद का एसिंक्रोनस बूटलोडर नहीं लिखना चाहता, क्योंकि बाजार में उनमें से बहुत सारे हैं (आवश्यकता है, script.js ...) और अपनी खुद की बाइक का आविष्कार करना मूर्खतापूर्ण होगा, इसलिए आपको कॉन्फ़िगरेशन का उपयोग करके खुद को निर्धारित करना होगा।
आप निम्नलिखित सिंटैक्स का समर्थन करने वाले किसी भी बूटलोडर का उपयोग कर सकते हैं:

 loader([urls], function callback() {});

इस तरह, आप किसी भी संसाधन को लोड कर सकते हैं जिसकी आपको आवश्यकता होती है (केवल जेएस फाइलें, सीएसएस, आदि)।
इस उदाहरण में, मैं script.js का उपयोग करूंगा।

 var modules = {}, asyncLoader, providers = { $controllerProvider: $controllerProvider, $compileProvider: $compileProvider, $filterProvider: $filterProvider, $provide: $provide, // other things $injector: $injector };

यह कॉन्फ़िगरेशन का एक काफी आसान हिस्सा है, हमें एक अतुल्यकालिक लोडर और मॉड्यूल की एक सूची को परिभाषित करने की आवश्यकता है जिसे हम निर्देश का उपयोग करके लोड कर सकते हैं।
हम आरंभिक स्क्रिप्ट भी चलाते हैं जिसे प्रारंभिक आरंभीकरण के लिए मॉड्यूल की सूची को पॉप्युलेट करने के लिए पहले परिभाषित किया गया था।

 this.config = function(config) { if(typeof config.asyncLoader === 'undefined') { throw('You need to define an async loader such as requireJS or script.js'); } asyncLoader = config.asyncLoader; init(angular.element(window.document)); if(typeof config.modules !== 'undefined') { if(angular.isArray(config.modules)) { angular.forEach(config.modules, function(moduleConfig) { modules[moduleConfig.name] = moduleConfig; }); } else { modules[config.modules.name] = config.modules; } } };

प्रदाता को कॉन्फ़िगर करने के लिए, बस इस कोड को अपने आवेदन में जोड़ें:

 angular.module('app').config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) { $ocLazyLoadProvider.config({ modules: [ { name: 'TestModule', files: ['js/testModule.js'], template: 'partials/testLazyLoad.html' } ], asyncLoader: $script }); }]);

जब से हम एक प्रदाता लिख रहे हैं, केवल एक ही जगह हम घटक इंजेक्शन का उपयोग कर सकते हैं वह है $get संपत्ति। यह संपत्ति क्या लौटाएगा, और आपकी सेवा में उपलब्ध होगा।
हम मॉड्यूल को कॉन्फ़िगर करने और उन्हें लोड करने के लिए एक फ़ंक्शन के लिए गेटर्स और सेटर्स को परिभाषित करेंगे।
हम मॉड्यूल की सूची के लिए एक गेट्टर भी जोड़ देंगे, क्योंकि यह उपलब्ध होना चाहिए अगर कोई भी प्लगइन लिखना चाहता है।
गेटर्स और सेटर आसानी से परिभाषित होते हैं:

 getModuleConfig: function(name) { if(!modules[name]) { return null; } return modules[name]; }, setModuleConfig: function(module) { modules[module.name] = module; return module; }, getModules: function() { return regModules; }

अब डाउनलोड फ़ंक्शन पर एक करीब से नज़र डालते हैं। हमें नाम या कॉन्फ़िगरेशन द्वारा लोडिंग मॉड्यूल को लागू करने की आवश्यकता है।
कॉन्फ़िगरेशन ऑब्जेक्ट में मॉड्यूल का नाम, फ़ाइलों की एक सूची (स्क्रिप्ट, सीएसएस ...) और एक वैकल्पिक टेम्पलेट शामिल है।
यदि हम निर्देश का उपयोग करके मॉड्यूल को लोड करते हैं, तो इसका कोड बदलने के लिए टेम्पलेट का उपयोग किया जाएगा।
हम मॉड्यूल निर्भरता की एक सूची भी बनाए रखेंगे ताकि उन्हें पंजीकृत किया जा सके।
लोड फ़ंक्शन एक वादा लौटाएगा, जो आगे के विकास को सरल करेगा।

 load: function(name, callback) { var self = this, config, moduleCache = [], deferred = $q.defer(); if(typeof name === 'string') { config = self.getModuleConfig(name); } else if(typeof name === 'object' && typeof name.name !== 'undefined') { config = self.setModuleConfig(name); name = name.name; } moduleCache.push = function(value) { if(this.indexOf(value) === -1) { Array.prototype.push.apply(this, arguments); } }; if(!config) { var errorText = 'Module "' + name + '" not configured'; $log.error(errorText); throw errorText; } }

मॉड्यूल निर्भरता प्राप्त करने के लिए हमें एक फ़ंक्शन की आवश्यकता है:

 function getRequires(module) { var requires = []; angular.forEach(module.requires, function(requireModule) { if(regModules.indexOf(requireModule) === -1) { requires.push(requireModule); } }); return requires; }

हमें यह जांचने के लिए भी एक फ़ंक्शन की आवश्यकता है कि क्या एक निश्चित मॉड्यूल पहले लोड किया गया है, मामले में हम आरंभीकरण के क्षण से वर्तमान क्षण तक कुछ चूक गए। ऐसा करने का कोई "साफ" तरीका नहीं है, इसलिए आपको "गंदा" एक का उपयोग करना होगा:

 function moduleExists(moduleName) { try { angular.module(moduleName); } catch(e) { if(/No module/.test(e) || (e.message.indexOf('$injector:nomod') > -1)) { return false; } } return true; }

अब हम एक फ़ंक्शन लिख सकते हैं जो नए मॉड्यूल की निर्भरता को लोड करेगा। यदि मॉड्यूल पहले लोड किया गया है, तो यह तुरंत नियंत्रण लौटा देगा या पंजीकरण के लिए नए मॉड्यूल और उनकी निर्भरता की सूची प्राप्त करने के लिए मॉड्यूल moduleCache चर को पॉप्युलेट करेगा।

 function loadDependencies(moduleName, allDependencyLoad) { if(regModules.indexOf(moduleName) > -1) { return allDependencyLoad(); } var loadedModule = angular.module(moduleName), requires = getRequires(loadedModule); function onModuleLoad(moduleLoaded) { if(moduleLoaded) { var index = requires.indexOf(moduleLoaded); if(index > -1) { requires.splice(index, 1); } } if(requires.length === 0) { $timeout(function() { allDependencyLoad(moduleName); }); } } var requireNeeded = getRequires(loadedModule); angular.forEach(requireNeeded, function(requireModule) { moduleCache.push(requireModule); if(moduleExists(requireModule)) { return onModuleLoad(requireModule); } var requireModuleConfig = self.getConfig(requireModule); if(requireModuleConfig && (typeof requireModuleConfig.files !== 'undefined')) { asyncLoader(requireModuleConfig.files, function() { loadDependencies(requireModule, function requireModuleLoaded(name) { onModuleLoad(name); }); }); } else { $log.warn('module "' + requireModule + "' not loaded and not configured"); onModuleLoad(requireModule); } return null; }); if(requireNeeded.length === 0) { onModuleLoad(); } return null; }

अंत में, हमें एसिंक्रोनस लोडर को कॉल करने की आवश्यकता है, जो निर्भरता को लोड करेगा और उन्हें पंजीकृत करेगा।

 asyncLoader(config.files, function() { moduleCache.push(name); loadDependencies(name, function() { register(providers, moduleCache, $log); $timeout(function() { deferred.resolve(config); }); }); });

हमने ऐसा किया है, अब आप मांग पर मॉड्यूल लोड कर सकते हैं !!!

 $ocLazyLoad.load({ name: 'TestModule', files: ['js/testModule.js'] }).then(function() { console.log('done!'); });

निर्देश का उपयोग करना

हमें निर्देश के माध्यम से मॉड्यूल को लोड करने में सक्षम होना चाहिए। ऐसा करने के लिए, हम उस template पैरामीटर का उपयोग करेंगे जिसका हमने पहले उल्लेख किया था। यह टेम्प्लेट डायरेक्टिव की जगह लेगा।
हमारे एप्लिकेशन के कैश में पहले से मौजूद टेम्प्लेट को लोड करने से रोकने के लिए हम $templateCache कैश सेवा का उपयोग करेंगे।
निर्देश को निम्नलिखित तरीके से लागू किया जाएगा:

 <div oc-lazy-load="{name: 'TestModule', files: ['js/testModule.js'], template: 'partials/testLazyLoad.html'}"></div>

यदि हमने प्रदाता सेटिंग्स में TestModule मॉड्यूल के कॉन्फ़िगरेशन को परिभाषित किया है, तो हम अपने निर्देश को निम्नानुसार कॉल कर सकते हैं:

 <div oc-lazy-load="'TestModule'"></div>

एक निर्देश लिखना इस लेख का उद्देश्य नहीं है, इसलिए मैं इसका विवरण छोड़ दूंगा। निर्देश का एक महत्वपूर्ण हिस्सा अपने यूआरएल द्वारा एक नया टेम्प्लेट लोड करना है, या कैश से अगर यह पहले लोड किया गया था:

 ocLazyLoad.directive('ocLazyLoad', ['$http', '$log', '$ocLazyLoad', '$compile', '$timeout', '$templateCache', function($http, $log, $ocLazyLoad, $compile, $timeout, $templateCache) { return { link: function(scope, element, attr) { var childScope; /** * Destroy the current scope of this element and empty the html */ function clearContent() { if(childScope) { childScope.$destroy(); childScope = null; } element.html(''); } /** * Load a template from cache or url * @param url * @param callback */ function loadTemplate(url, callback) { scope.$apply(function() { var view; if(typeof(view = $templateCache.get(url)) !== 'undefined') { scope.$evalAsync(function() { callback(view); }); } else { $http.get(url) .success(function(data) { $templateCache.put('view:' + url, data); scope.$evalAsync(function() { callback(data); }); }) .error(function(data) { $log.error('Error load template "' + url + "': " + data); }); } }); } scope.$watch(attr.ocLazyLoad, function(moduleName) { if(moduleName) { $ocLazyLoad.load(moduleName).then(function(moduleConfig) { if(!moduleConfig.template) { return; } loadTemplate(moduleConfig.template, function(template) { childScope = scope.$new(); element.html(template); var content = element.contents(); var linkFn = $compile(content); $timeout(function() { linkFn(childScope); }); }); }); } else { clearContent(); } }); } }; }]);

Ui- राउटर के साथ हमारी सेवा का एकीकरण

मॉड्यूल का विलंबित लोडिंग आमतौर पर तब होता है जब आप एक नया मार्ग लोड करते हैं। आइए देखें कि आप ui- राउटर के साथ यह कैसे कर सकते हैं (लेकिन यह ng-route साथ भी काम करेगा)।
चूंकि हम किसी सेवा या निर्देश का उपयोग करके अपने मॉड्यूल को लोड कर सकते हैं, हम दो विकल्पों का उपयोग कर सकते हैं: resolve ऑब्जेक्ट का उपयोग करें या टेम्पलेट का उपयोग करें।
सेवा का उपयोग करने के लिए एक resolve वस्तु के उपयोग की आवश्यकता होती है। resolve ऑब्जेक्ट आपको अपने मार्ग के लिए कुछ मापदंडों को परिभाषित करने की अनुमति देता है, और टेम्पलेट लोड करने से पहले कहा जाता है। यह महत्वपूर्ण है, टेम्पलेट एक नियंत्रक का उपयोग कर सकता है जो स्थगित लोडिंग करता है।
resolve फ़ंक्शन का प्रत्येक पैरामीटर यह निर्धारित करने के लिए वादे को सक्षम करता है कि इसे कैसे हल किया जाना चाहिए। चूंकि हमारा लोड फ़ंक्शन एक वादा लौटाता है, हम इसका उपयोग कर सकते हैं। यहाँ, views भाग की आवश्यकता है, यह केवल इस उदाहरण के लिए है।

 $stateProvider.state('index', { url: "/", // root route views: { "lazyLoadView": { templateUrl: 'partials/testLazyLoad.html' } }, resolve: { test: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load({ name: 'TestModule', files: ['js/testModule.js'] }); }] } });

निर्देश का उपयोग करना भी सरल है:

 $stateProvider.state('index', { url: "/", views: { "lazyLoadView": { template: '<div oc-lazy-load="{name: \'TestModule\', files: [\'js/testModule.js\'], template: \'partials/testLazyLoad.html\'}"></div>' } } });

मुझे लगता है कि resolve फ़ंक्शन का उपयोग resolve तुलना में यह थोड़ा कम इष्टतम है, क्योंकि हमने एक जटिल परत जोड़ी है, लेकिन यह कुछ मामलों में बहुत उपयोगी हो सकता है।
इसलिए हमने सब कुछ किया है। मुझे आशा है कि आपको यह विलंबित बूटलोडर उपयोगी लगेगा!
एक पूरी तरह से काम कर रहे उदाहरण आप प्लंकर पर एक नज़र डाल सकते हैं ।
आप जीथब पर सभी कोड और उदाहरण भी देख सकते हैं।
मैंने इस कोणीय मॉड्यूल का उपयोग अपनी परियोजना के लिए आधार के रूप में किया था, लेकिन मैंने अपनी ज़रूरत की नई विशेषताओं को जोड़कर इसे बेहतर बनाया।

AngularJS में ऑन-डिमांड मॉड्यूल लोड हो रहा है