📊 👆🏻 🛶 एक AngularJS एप्लिकेशन को पृथक मॉड्यूल में अलग करना 👧🏿 🛵 🌵

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

इस लेख में मैं एक वास्तु समाधान प्रस्तुत करना चाहता हूं: एक आवेदन को कई हिस्सों में विभाजित करना जो कि उनके बीच संबंधों के ढांचे और स्वतंत्र कार्यान्वयन के संदर्भ में संबंधित नहीं हैं।

कोणीय में बूटस्ट्रैप की अवधारणा है। यह वह विधि है जिसे आमतौर पर पृष्ठ लोड होने के बाद कहा जाता है यदि एनजी ऐप विशेषता के साथ एक तत्व है। यह इस तत्व को विशेषता मान में निर्दिष्ट मॉड्यूल से बांधता है। केवल एक ऐसा तत्व होना चाहिए, अन्यथा प्रलेखन कुछ भी गारंटी नहीं देता है। हालांकि, आप इसे मैन्युअल रूप से उपयोग कर सकते हैं: angular.bootstrap(element, [/*Module*/]); यह निर्दिष्ट मॉड्यूल, उसकी सभी निर्भरता, साथ ही एनजी मॉड्यूल और उसकी निर्भरता को लॉन्च करेगा। इसलिए, नया एप्लिकेशन (इसे एक पृथक मॉड्यूल कहते हैं) का अपना $ इंजेक्टर, $ रूटस्कॉप, $ संकलन, आदि होगा। - पूरे आंतरिक कोणीय रसोई को फिर से बनाया जाएगा। मूल पृथक मॉड्यूल को नेस्टेड मॉड्यूल के अस्तित्व के बारे में नहीं पता होगा, ईवेंट (एमिट और प्रसारण) मॉड्यूल के बीच से नहीं गुजरेंगे, और एक पृथक मॉड्यूल में बुलाया $ डाइजेस्ट दूसरे में लीक नहीं होगा। शिथिल युग्मित घटकों के लिए, यह वही है जो आपको चाहिए।

नए अनुप्रयोगों के सुविधाजनक निर्माण के लिए, निम्नलिखित निर्देश का उपयोग किया जा सकता है:

 directive('newApp', function () { return{ restrict: 'EA', transclude: true, scope: { module: '=' }, link: function (scope, element, attr, ctrl, transclude) { var div = document.createElement('app'); var module = angular.module(scope.$id, [scope.module]).run(['$rootScope', function ($rootScope) { scope.$on('$destroy', function() { $rootScope.$destroy(); angular.module(scope.$id, []); }); transclude($rootScope, function (el) { angular.element(div).append(el); element.append(div); }); }]); angular.bootstrap(div, [scope.$id]); } }; });

का उपयोग करें:

 <body ng-app="App"> <new-app module=" 'SomeModule' "> <some-module-directive/> </new-app> </body>

पहले और बाद के प्रदर्शन की तुलना करने के लिए, आप सिंथेटिक उदाहरण देख सकते हैं: धीमा संस्करण और तेज संस्करण ।

हमें मेमोरी लीक का भी उल्लेख करना चाहिए। उनकी अनुपस्थिति के लिए, निर्देशन में $ नष्ट घटना हैंडलर जिम्मेदार है। वह इस घटना को पृथक मॉड्यूल के अंदर भेजता है ताकि हर कोई इसके बारे में जानता हो और पंजीकृत निर्देश, नियंत्रक आदि को हटाने के लिए मॉड्यूल को फिर से लिखता है। हालांकि, स्मृति अभी भी लीक है, उदाहरण के लिए, angular.element.cache में तत्वों के कैश के कारण और भी बहुत कुछ। । यह मुद्दा एक अलग अध्ययन और लेख का हकदार है।

खोजा गया एक और मुद्दा $ स्थान सेवा है। अन्य बातों के अलावा, वह पृष्ठ के पते की निगरानी करता है, और इसे बदलते समय, कुछ प्रकार के इशारे करता है, उदाहरण के लिए, ngView की सामग्री को अपडेट करता है। कई अलग-अलग मॉड्यूल के मामले में, $ स्थान के कई उदाहरण बनाए जाएंगे, यूआरएल को बदलने के लिए कई हैंडलर, जो अच्छा नहीं है। अब तक मैं निम्नलिखित वर्कअराउंड के साथ आया हूँ:

 .config(function ($locationProvider) { $locationProvider.$get = function () { return angular.element(document).injector().get('$location'); }; })

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

एक AngularJS एप्लिकेशन को पृथक मॉड्यूल में अलग करना

More articles: