AngularJS में पूर्ववत पथ परिवर्तन

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




अनुवादक शब्दकोश:
- देखें - टेम्पलेट
- मार्ग - मार्ग, मार्ग
- नेविगेशन - संक्रमण

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

$ LocationChangeStart घटना

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

$browser.onUrlChange(function (newUrl) { if ($location.absUrl() != newUrl) { if ($rootScope.$broadcast('$locationChangeStart', newUrl, $location.absUrl()).defaultPrevented) { $browser.url($location.absUrl()); return; } $rootScope.$evalAsync(function () { var oldUrl = $location.absUrl(); $location.$$parse(newUrl); afterLocationChange(oldUrl); }); if (!$rootScope.$$phase) $rootScope.$digest(); } }); 

कोड का सबसे महत्वपूर्ण हिस्सा $ प्रसारण कह रहा है। यह कॉल सभी चाइल्ड स्कोप के लिए $ लोकेशन चेंजस्टार्ट इवेंट को भेजती है, ताकि उन्हें लोकेशन में बदलाव की सूचना दी जा सके। इस घटना को संभालने के लिए, आप $ rootScope.on () फ़ंक्शन का उपयोग कर सकते हैं। उदाहरण के लिए, मैंने एक फ़ंक्शन में $ को कॉल किया () जो कि नियंत्रक शुरू होने के तुरंत बाद कहा जाता है:

  function init() { //initialize data here.. //Make sure they're warned if they made a change but didn't save it //Call to $on returns a "deregistration" function that can be called to //remove the listener (see routeChange() for an example of using it) onRouteChangeOff = $rootScope.$on('$locationChangeStart', routeChange); } 

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

रूट क्रॉसिंग रद्द करें

कॉलबैक फ़ंक्शन रूटचेंज () को $ लोकेशनचेंजस्टार्ट इवेंट द्वारा ट्रिगर किया गया है और उपयोगकर्ता के लिए एक चेतावनी संवाद प्रदर्शित करता है:


यहाँ मार्ग परिवर्तन () फ़ंक्शन के लिए कोड है:

 function routeChange(event, newUrl) { //Navigate to newUrl if the form isn't dirty if (!$scope.editForm.$dirty) return; var modalOptions = { closeButtonText: 'Cancel', actionButtonText: 'Ignore Changes', headerText: 'Unsaved Changes', bodyText: 'You have unsaved changes. Leave the page?' }; modalService.showModal({}, modalOptions).then(function (result) { if (result === 'ok') { onRouteChangeOff(); //Stop listening for location changes $location.path(newUrl); //Go to page they're interested in } }); //prevent navigation by default since we'll handle it //once the user selects a dialog option event.preventDefault(); return; } 

इस फ़ंक्शन के मापदंडों में, आप ईवेंट ऑब्जेक्ट और नए मार्ग को देख सकते हैं, जिसका उपयोगकर्ता अनुसरण कर रहा है। चूंकि आपको टेम्पलेट बदलने से पहले उपयोगकर्ता को डेटा हानि के बारे में याद दिलाने की आवश्यकता है, इसलिए संक्रमण को रद्द करने के लिए ईवेंट ऑब्जेक्ट का उपयोग किया जाता है। फ़ंक्शन के अंत में event.preventDefault () को कॉल करें।
संवाद बॉक्स modalService.showModal () फ़ंक्शन को कॉल करके दिखाया जाता है (एक व्यक्तिगत मोडल सेवा पर मेरी पिछली पोस्ट पर नज़र डालें जो कोणीय UI बूटस्ट्रैप से $ modal सेवा के आसपास एक आवरण के रूप में काम करता है)।
यदि उपयोगकर्ता "परिवर्तनों को अनदेखा करता है" का चयन करता है, तो उसके परिवर्तन रद्द कर दिए जाएंगे और आवेदन आवश्यक मार्ग पर चला जाएगा। यह onRouteChangeOff () फ़ंक्शन (याद रखें कि यह फ़ंक्शन फ़ंक्शन को $ कॉल करके वापस लौटाया गया है) को कॉल करके $ लोकेशन चेंजस्टार्ट ईवेंट के लिए प्रतीक्षा को अक्षम करने से होगा, ताकि हम अनदेखा परिवर्तन बटन क्लिक होने पर दिखाई देने वाले संवाद बॉक्स के अनंत लूप में फंस न जाएं।
तब दिए गए टेम्प्लेट में परिवर्तन को संभालने के लिए $ location.path (newUrl) कहा जाता है। यदि उपयोगकर्ता कार्रवाई रद्द करता है, तो वह वर्तमान टेम्पलेट पर रहेगा।

निष्कर्ष

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