कस्टम निर्देश क्या है?
कोणीय जेएस में एक कस्टम निर्देश आपकी इच्छित कार्यक्षमता के साथ एक उपयोगकर्ता-परिभाषित निर्देश है। भले ही AngularJS के पास बॉक्स से बहुत सारे शक्तिशाली निर्देश हों, लेकिन कुछ समय बाद कस्टम निर्देश की आवश्यकता होती है।
इस ट्यूटोरियल में, आप सीखेंगे-
- कस्टम निर्देश कैसे बनाएं?
- AngularJs के निर्देश और क्षेत्र
- निर्देशों के साथ नियंत्रकों का उपयोग करना
- पुन: प्रयोज्य निर्देश कैसे बनाएँ
- AngularJS निर्देश और घटक - एनजी-ट्रांसक्लूड
- निहित निर्देश
- एक निर्देश में घटनाओं को संभालना
कस्टम निर्देश कैसे बनाएं?
आइए एक उदाहरण देखें कि हम एक कस्टम निर्देश कैसे बना सकते हैं।
हमारे मामले में कस्टम निर्देश बस एक div टैग को इंजेक्ट करने वाला है, जिसमें हमारे पेज पर "AngularJS Tutorial" का पाठ है, जब निर्देश कहा जाता है।
Event Registration Guru99 Global Event
कोड स्पष्टीकरण:
- हम पहले अपने कोणीय अनुप्रयोग के लिए एक मॉड्यूल बना रहे हैं। यह एक कस्टम निर्देश बनाने के लिए आवश्यक है क्योंकि निर्देश इस मॉड्यूल का उपयोग करके बनाया जाएगा।
- अब हम "ngGuru" नामक एक कस्टम निर्देशन बना रहे हैं और एक फ़ंक्शन को परिभाषित कर रहे हैं जिसमें हमारे निर्देश के लिए कस्टम कोड होगा।
ध्यान दें:-
ध्यान दें कि निर्देश को परिभाषित करते समय, हमने इसे 'जी' अक्षर के साथ एनगुरु के रूप में परिभाषित किया है। और जब हम इसे अपने div टैग से एक निर्देश के रूप में एक्सेस करते हैं तो हम इसे ng-गुरु के रूप में एक्सेस कर रहे हैं। यह कैसे कोणीय एक आवेदन में परिभाषित कस्टम निर्देशों को समझता है। सबसे पहले कस्टम निर्देश का नाम 'एनजी' अक्षरों से शुरू होना चाहिए। दूसरी बात हाइफ़न सिंबल '-' केवल निर्देश को कॉल करते समय उल्लेख किया जाना चाहिए। और तीसरी बात यह है कि निर्देश को परिभाषित करते समय अक्षर 'एनजी' के बाद पहला अक्षर या तो कम या बड़ा हो सकता है।
- हम टेम्पलेट पैरामीटर का उपयोग कर रहे हैं जो कस्टम निर्देशों के लिए कोणीय द्वारा परिभाषित पैरामीटर है। इसमें, हम परिभाषित कर रहे हैं कि जब भी इस निर्देश का उपयोग किया जाता है, तो बस टेम्पलेट के मूल्य का उपयोग करें और इसे कॉलिंग कोड में इंजेक्ट करें।
- अब हम अपने कस्टम निर्मित "एनजी-गुरु" निर्देश का उपयोग कर रहे हैं। जब हम ऐसा करते हैं, तो हमने अपने टेम्पलेट "कोणीय जेएस ट्यूटोरियल " के लिए निर्धारित मूल्य अब यहां इंजेक्ट किया जाएगा।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
- उपरोक्त आउटपुट स्पष्ट रूप से दर्शाता है कि हमारे कस्टम एनजी-गुरु निर्देश, जिसमें कस्टम टेक्स्ट दिखाने के लिए परिभाषित टेम्पलेट ब्राउज़र में प्रदर्शित होता है।
AngularJs के निर्देश और क्षेत्र
गुंजाइश को गोंद के रूप में परिभाषित किया गया है जो दृश्य और नियंत्रक के बीच डेटा को प्रबंधित करके नियंत्रक को दृश्य से बांधता है।
कस्टम AngularJs निर्देशों का निर्माण करते समय, वे डिफ़ॉल्ट रूप से पेरेंट कंट्रोलर में स्कोप ऑब्जेक्ट तक पहुंच पाएंगे।
इस तरह, मुख्य नियंत्रक को दिए जा रहे डेटा का उपयोग करने के लिए कस्टम निर्देश के लिए यह आसान हो जाता है।
आइए एक उदाहरण देखें कि हम अपने कस्टम निर्देश में माता-पिता नियंत्रक के दायरे का उपयोग कैसे कर सकते हैं।
Event Registration Guru99 Global Event
कोड स्पष्टीकरण:
- हम पहले एक नियंत्रक बनाते हैं, जिसे "डेमोकंट्रोलर" कहा जाता है। इसमें, हम ट्यूटोरियलनाम नाम के एक वैरिएबल को परिभाषित करते हैं और इसे एक कथन में गुंजाइश ऑब्जेक्ट में संलग्न करते हैं - $ गुंजाइश।
- हमारे कस्टम निर्देश में, हम एक अभिव्यक्ति का उपयोग करके चर "tutorialName" कह सकते हैं। यह चर सुलभ होगा क्योंकि यह नियंत्रक "डेमोकंट्रोलर" में परिभाषित है, जो इस निर्देश के लिए माता-पिता बन जाएगा।
- हम नियंत्रक को एक div टैग में संदर्भित करते हैं, जो हमारे मूल div टैग के रूप में कार्य करेगा। ध्यान दें कि ट्यूटोरियलनेम वैरिएबल तक पहुँचने के लिए हमारे कस्टम निर्देश के लिए यह पहले किया जाना चाहिए।
- हम अंत में हमारे कस्टम डायरेक्शन "एनजी-गुरु" को अपने डिव टैग से जोड़ते हैं।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
- उपरोक्त आउटपुट स्पष्ट रूप से दर्शाता है कि हमारा कस्टम निर्देश "एनजी-गुरु" पेरेंट कंट्रोलर में स्कोप वैरिएबल ट्यूटोरियलनाम का उपयोग करता है।
निर्देशों के साथ नियंत्रकों का उपयोग करना
कोणीय वस्तु की आवश्यकता के बिना कस्टम निर्देशकों से सीधे नियंत्रक के सदस्य चर तक पहुंचने की सुविधा देता है ।
यह कई बार आवश्यक हो जाता है क्योंकि किसी एप्लिकेशन में आपके पास कई नियंत्रक से संबंधित कई स्कोप ऑब्जेक्ट्स हो सकते हैं।
इसलिए एक उच्च संभावना है कि आप गलत नियंत्रक की गुंजाइश वस्तु तक पहुंचने की गलती कर सकते हैं।
ऐसे परिदृश्य में विशेष रूप से यह कहने का एक तरीका है कि "मैं अपने निर्देशन से इस विशिष्ट नियंत्रक का उपयोग करना चाहता हूं"।
आइए एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।
Event Registration Guru99 Global Event
कोड स्पष्टीकरण:
- हम पहले एक नियंत्रक बनाते हैं, जिसे "डेमोकंट्रोलर" कहा जाता है। इसमें हम "tutorialName" नामक एक चर को परिभाषित करेंगे और इस बार इसे गुंजाइश ऑब्जेक्ट में संलग्न करने के बजाय, हम इसे सीधे नियंत्रक से जोड़ देंगे।
- हमारे कस्टम निर्देश में, हम विशेष रूप से उल्लेख कर रहे हैं कि हम नियंत्रक पैरामीटर कीवर्ड का उपयोग करके नियंत्रक "डेमोकंट्रोलर" का उपयोग करना चाहते हैं।
- हम "कंट्रोलर" पैरामीटर का उपयोग करके नियंत्रक का संदर्भ बनाते हैं। यह कोणीय द्वारा परिभाषित किया गया है और नियंत्रक को संदर्भ के रूप में संदर्भित करने का तरीका है।
नोट: - कंट्रोलर, कंट्रोलर और टेम्प्लेट स्टेटमेंट के संबंधित ब्लॉक्स को निर्दिष्ट करके एक निर्देश में कई कंट्रोलर्स को एक्सेस करना संभव है।
- अंत में, हमारे टेम्पलेट में, हम चरण 3 में बनाए गए संदर्भ का उपयोग कर रहे हैं और सदस्य चर का उपयोग कर रहे हैं जो सीधे चरण 1 में नियंत्रक से जुड़ा था।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट स्पष्ट रूप से दिखाता है कि कस्टम निर्देश विशेष रूप से डेमोकंट्रोलर और सदस्य चर ट्यूटोरियलनाम तक पहुँच रहा है और इससे जुड़ा हुआ पाठ "कोणीय" प्रदर्शित करता है।
पुन: प्रयोज्य निर्देश कैसे बनाएँ
हमने पहले से ही कस्टम निर्देशों की शक्ति देखी है, लेकिन हम अपने स्वयं के पुन: प्रयोज्य निर्देशों का निर्माण करके अगले स्तर तक ले जा सकते हैं।
उदाहरण के लिए, उदाहरण के लिए, हम कोड को इंजेक्ट करना चाहते थे जो हमेशा नीचे दिए गए HTML टैग को कई स्क्रीन पर दिखाएगा, जो मूल रूप से उपयोगकर्ता के "नाम" और "आयु" के लिए केवल एक इनपुट है।
हर बार कोड किए बिना कई स्क्रीन पर इस फ़ंक्शन का पुन: उपयोग करने के लिए, हम इन नियंत्रणों (उपयोगकर्ता का "नाम" और "आयु") को धारण करने के लिए कोणीय में एक मास्टर नियंत्रण या निर्देश बनाते हैं।
इसलिए अब, हर बार नीचे के स्क्रीन के लिए एक ही कोड दर्ज करने के बजाय, हम वास्तव में इस कोड को एक निर्देश में एम्बेड कर सकते हैं और उस निर्देश को किसी भी समय पर एम्बेड कर सकते हैं।
आइए एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।
Event Registration Guru99 Global Event
कोड स्पष्टीकरण:
- एक कस्टम निर्देश के लिए हमारे कोड स्निपेट में, क्या परिवर्तन सिर्फ मूल्य है जो हमारे कस्टम निर्देश के टेम्पलेट पैरामीटर को दिया गया है।
एक योजना के पांच टैग या पाठ के बजाय, हम वास्तव में "नाम" और "आयु" के लिए 2 इनपुट नियंत्रणों के पूरे टुकड़े में प्रवेश कर रहे हैं, जिसे हमारे पृष्ठ पर दिखाया जाना चाहिए।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
उपरोक्त आउटपुट से, हम देख सकते हैं कि कस्टम निर्देश के टेम्पलेट से कोड स्निपेट पेज पर जुड़ जाता है।
AngularJS निर्देश और घटक - एनजी-ट्रांसक्लूड
जैसा कि हमने पहले उल्लेख किया है, कोणीय HTML की कार्यक्षमता को बढ़ाने के लिए है। और हमने पहले ही देखा है कि कस्टम री-यूजेबल निर्देशों का उपयोग करके हम कोड इंजेक्शन कैसे लगा सकते हैं।
लेकिन आधुनिक वेब अनुप्रयोग विकास में, वेब घटकों को विकसित करने की अवधारणा भी है। जो मूल रूप से हमारे स्वयं के HTML टैग बनाने का मतलब है जो हमारे कोड में घटकों के रूप में उपयोग किया जा सकता है।
इसलिए कोणीय स्वयं HTML टैग में विशेषताओं को इंजेक्ट करने की क्षमता देकर HTML टैग को विस्तारित करने के लिए एक और स्तर की शक्ति प्रदान करता है।
यह " एनजी-ट्रांसक्लूड " टैग द्वारा किया जाता है , जो मार्कअप में निर्देश के अंदर रखी गई हर चीज को पकड़ने के लिए कोणीय बताने के लिए एक प्रकार की सेटिंग है।
आइए एक उदाहरण लेते हैं कि हम इसे कैसे प्राप्त कर सकते हैं।
Event Registration Guru99 Global Event
Angular JS कोड स्पष्टीकरण:
- हम 'pane' नामक एक कस्टम HTML टैग को परिभाषित करने के लिए निर्देश का उपयोग कर रहे हैं और एक फ़ंक्शन जोड़ रहे हैं जो इस टैग के लिए कुछ कस्टम कोड डाल देगा। आउटपुट में, हमारा कस्टम पैन टैग "AngularJS" टेक्स्ट को एक ठोस ब्लैक बॉर्डर के साथ आयत में प्रदर्शित करने वाला है।
- "ट्रांसक्लूड" विशेषता को सच के रूप में उल्लेख किया जाना चाहिए, जिसे इस टैग को हमारे डोम में इंजेक्ट करने के लिए कोणीय द्वारा आवश्यक है।
- दायरे में, हम एक शीर्षक विशेषता को परिभाषित कर रहे हैं। विशेषताएँ सामान्यतः नाम / मूल्य जोड़े जैसे: नाम = "मूल्य" के रूप में परिभाषित की जाती हैं। हमारे मामले में, हमारे फलक HTML टैग में विशेषता का नाम "शीर्षक" है। "@" प्रतीक कोणीय से आवश्यकता है। ऐसा इसलिए किया जाता है कि जब चरण शीर्षक = {{शीर्षक}} को चरण 5 में निष्पादित किया जाता है, शीर्षक विशेषता के लिए कस्टम कोड फलक HTML टैग में जोड़ा जाता है।
- शीर्षक विशेषताओं के लिए कस्टम कोड जो हमारे नियंत्रण के लिए एक ठोस काली सीमा खींचता है।
- अंत में, हम अपने कस्टम HTML टैग को शीर्षक विशेषता के साथ बुला रहे हैं जिसे परिभाषित किया गया था।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
- आउटपुट स्पष्ट रूप से दिखाता है कि फलक html5 टैग की शीर्षक विशेषता "Angular.JS" के कस्टम मूल्य पर सेट की गई है।
निहित निर्देश
कोणीय में निर्देशों को नेस्टेड किया जा सकता है। किसी भी प्रोग्रामिंग भाषा में सिर्फ आंतरिक मॉड्यूल या फ़ंक्शन की तरह, आपको एक दूसरे के भीतर निर्देशों को एम्बेड करने की आवश्यकता हो सकती है।
आप नीचे दिए गए उदाहरण को देखकर इसकी बेहतर समझ प्राप्त कर सकते हैं।
इस उदाहरण में, हम "बाहरी" और "आंतरिक" नामक 2 निर्देश बना रहे हैं।
- आंतरिक निर्देश "इनर" नामक एक पाठ को प्रदर्शित करता है।
- जबकि बाहरी निर्देश वास्तव में "इनर" नामक पाठ को प्रदर्शित करने के लिए आंतरिक निर्देश को कॉल करता है।
Guru99 Global Event