🐞 ⚗️ 📐 AngularJS। मॉड्यूल के विलंबित लोडिंग 🧡 💚 🚀

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

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

तो, समस्या उत्पन्न होती है:

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

चलिए शुरू करते हैं।
एक निर्देश का एक उदाहरण, कोड में किसकी उपस्थिति होम मॉड्यूल के लोडिंग को आरंभ करेगी:

<div load-on-demand="'home'"></div>

लोड-ऑन-डिमांड निर्देश के अलावा, मॉड्यूल को लोड करने के लिए एक नाम है। यह विकल्प लोड करने योग्य मॉड्यूल को कॉन्फ़िगर करने में अधिक लचीलेपन के लिए चुना गया था। कॉन्फ़िगरेशन आमतौर पर मॉड्यूल.कॉन्फिग फ़ंक्शन को कॉल करके किया जाता है।
फ़ंक्शन कॉल उदाहरण:

 var app = angular.module('app', ['loadOnDemand']); app.config(['$loadOnDemandProvider', function ($loadOnDemandProvider) { var modules = [ { name: 'home', script: 'js/home.js' } ]; $loadOnDemandProvider.config(modules, []); }]);

अब हम सीधे निर्देश को पास करते हैं। हमारे मामले में, हमें निर्देश को ठीक करने की आवश्यकता नहीं है, इसलिए हम केवल लिंक फ़ंक्शन (लिंकफंक्शन) को वापस कर देते हैं, जो सब कुछ आवश्यक है। एल्गोरिथ्म को प्रदर्शित करने वाला छद्म कोड:

 var aModule = angular.module('loadOnDemand', []); aModule.directive('loadOnDemand', ['$loadOnDemand', '$compile', function ($loadOnDemand, $compile) { return { link: function (scope, element, attr) { var moduleName = scope.$eval(attr.loadOnDemand); //   //      var moduleConfig = $loadOnDemand.getConfig(moduleName); $loadOnDemand.load(moduleName, function() { //   loadTemplate(moduleConfig.template, function(template) { //   childScope = scope.$new(); //      element.html(template); //   html  DOM var content = element.contents(), linkFn = $compile(content); //  DOM-   angular linkFn(childScope); //    scope }); }); } }; }]);

यहाँ मुख्य बिंदु $ loadOnDemand.load () फ़ंक्शन पर कॉल है। स्क्रिप्ट को कॉन्फ़िगर करने और लोड करने के लिए सभी कार्यक्षमता प्रदाता $ loadOnDemand में है। हम इसका खुलासा करेंगे। मैं जानबूझकर कार्यान्वयन विवरण छिपाता हूं ताकि कोड को अव्यवस्थित न किया जाए।

 aModule.provider('$loadOnDemand', function(){ this.$get = [function(){ //    ,     return { getConfig: function (name) {}, //      load: function (name, callback) {} //   }; }]; this.config = function (config, registeredModules) {} //    });

प्रत्येक प्रदाता को एक $ प्राप्त फ़ंक्शन प्रदान करना चाहिए, जिसे सेवा ऑब्जेक्ट वापस करना चाहिए। इस सेवा का उपयोग जब आवश्यक हो, तो इन्फ़ेक्टर द्वारा किया जाएगा। $ प्राप्त फ़ंक्शन के अलावा, हमारा आगंतुक एक कॉन्फ़िगर फ़ंक्शन प्रदान करता है - इसका उपयोग मॉड्यूल लोडर (ऊपर app.config) को कॉन्फ़िगर करने के लिए किया जाता है। तथ्य यह है कि मॉड्यूल.कॉन्फिग फ़ंक्शन केवल प्रदाता प्रदान करता है, इसलिए, प्रदाता कॉन्फ़िगरेशन तर्क को उस सेवा से अलग करना आवश्यक है जो इसे प्रदान करता है।
सेवा में स्वयं दो कार्य हैं: getConfig - का उपयोग आसानी से कॉन्फ़िगरेशन ऑब्जेक्ट प्राप्त करने के लिए किया जाता है और वास्तव में, सेवा का मुख्य कार्य लोड होता है, जो मॉड्यूल को लोड करता है। निम्न स्तर की स्क्रिप्ट लोडिंग को document.createScript का उपयोग करके किया जाता है - इस तरह की लोडिंग डीबगर आईडीई के लिए अधिक अनुकूल है।

और पानी वह सब होगा जिसकी जरूरत है। लेकिन, यह काम नहीं करेगा। इसका कारण ऊपर बताया गया है - स्क्रिप्ट लोड होने और निष्पादित होने के बाद, मॉड्यूल कार्यक्षमता को कोणीय बुनियादी ढांचे में नहीं रखा जाएगा। तो, कोणीय में डूबो।

DOM लोड होने के बाद, कोणीय इनिशियलाइज़ेशन प्रक्रिया शुरू होती है। वह एप्लिकेशन के मुख्य मॉड्यूल के नाम के साथ एनजी-ऐप निर्देश को खोजता है। उसके बाद, एक इंजेक्टर बनाया जाता है और DOM को कोणीय टेम्पलेट में संकलित किया जाता है। इस श्रृंखला में, हम एक इन्फ़ेक्टर बनाने में सबसे अधिक रुचि रखते हैं, क्योंकि यह यह कॉल है जो मॉड्यूल लोडिंग प्रक्रिया - लोडम्यूलस फ़ंक्शन को लॉन्च करता है। loadModules एक मॉड्यूल ऑब्जेक्ट प्राप्त करता है जिसमें वेक्टर के लिए आदेशों की एक कतार होती है - _invokeQueue। यह कतार सिर्फ तब बनाई जाती है जब कोणीय पंछी कहा जाता है। इस कतार का प्रत्येक तत्व संबंधित प्रदाता को दिया जाता है, जो कार्यक्षमता जोड़ने का काम करता है।
हमें केवल मौजूदा प्रदाताओं का उपयोग करके इस एल्गोरिथ्म को दोहराने की आवश्यकता है। हम उन्हें एक इंजेक्टर का उपयोग करके प्राप्त करते हैं।

 aModule.provider('$loadOnDemand', ['$controllerProvider', '$provide', '$compileProvider', '$filterProvider', function ($controllerProvider, $provide, $compileProvider, $filterProvider) { . . . loadScript(moduleName, function(){ register(moduleName); }); . . . }]);

रजिस्टर मॉड्यूल के रजिस्टर समारोह।

 moduleFn = angular.module(moduleName); for (invokeQueue = moduleFn._invokeQueue, i = 0, ii = invokeQueue.length; i < ii; i++) { invokeArgs = invokeQueue[i]; provider = providers[invokeArgs[0]]; provider[invokeArgs[1]].apply(provider, invokeArgs[2]); }

InvokeArgs [0] में प्रदाता का नाम शामिल है, invokeArgs [1] एक नई सेवा को पंजीकृत करने की अपनी विधि है। invokeArgs [2] - पैरामीटर जो पंजीकरण विधि (इंजेक्शन की सूची और सेवा के निर्माण कार्य) को पारित किया जाता है।

शायद यही सब है, यह केवल मॉड्यूल नाम के एक साधारण सरणी के रूप में मॉड्यूल में निर्भरता को लोड करने के लिए बनी हुई है। अपनी परियोजना के समान मॉड्यूल को जोड़ने के बाद, मुख्य पृष्ठ कुछ इस तरह दिखाई देगा:

 <!DOCTYPE html> <html ng-app="app"> <head> </head> <body> <div ng-view></div> <script src="js/angular.js"></script> <script src="js/loadOnDemand.js"></script> </body> </html>

और आवेदन का मुख्य मॉड्यूल, कुछ इस प्रकार है:

 (function(){ var app = angular.module('app', ['loadOnDemand']); app.config(['$routeProvider', function ($routeProvider) { . . . }; app.config(['$loadOnDemandProvider', function ($loadOnDemandProvider) { . . . }; })();

परियोजना एक डेमो के साथ जीथब पर टिकी हुई है

AngularJS। मॉड्यूल के विलंबित लोडिंग

More articles: