एक AngularJS निर्देश क्या है?
AngularJS में एक निर्देश एक कमांड है जो HTML को नई कार्यक्षमता देता है। जब कोणीय HTML कोड के माध्यम से जाता है, तो यह पहले पृष्ठ में निर्देशों को खोजेगा और फिर तदनुसार HTML पृष्ठ को पार्स करेगा।
एंगुलरजेएस निर्देश का एक सरल उदाहरण, जिसे हमने पहले अध्यायों में देखा है, "एनजी-मॉडल निर्देश" है। यह निर्देश हमारे डेटा मॉडल को हमारे दृष्टिकोण से बांधने के लिए उपयोग किया जाता है।
नोट: आपके पास कंट्रोलर रखने की आवश्यकता के बिना एनजी-इनिट, एनजी-रिपीट और एनजी-मॉडल निर्देशों के साथ एक HTML पृष्ठ में मूल कोणीय कोड हो सकता है। इन निर्देशों का तर्क Angular.js फ़ाइल में है जो Google द्वारा प्रदान किया गया है। नियंत्रक अगले स्तर के कोणीय प्रोग्रामिंग निर्माण हैं जो व्यापार तर्क की अनुमति देते हैं, लेकिन जैसा कि एक आवेदन के लिए कोणीय अनुप्रयोग के लिए उल्लेख किया गया है, यह नियंत्रक होना अनिवार्य नहीं है।
इस ट्यूटोरियल में, आप सीखेंगे-
- डायरेक्शन कैसे बनाएं
- एनजी-ऐप
- एनजी-init
- एनजी मॉडल
- एनजी-दोहराने
डायरेक्शन कैसे बनाएं
जैसा कि हमने प्रस्तावना में परिभाषित किया है, AngularJS निर्देश HTML की कार्यक्षमता को बढ़ाने का एक तरीका है।
AngularJS में 4 निर्देश परिभाषित हैं।
नीचे उनमें से हर एक को समझाने के लिए दिए गए उदाहरणों के साथ एंगुलरजेएस निर्देशों की सूची दी गई है।
1) एनजी-ऐप
इसका उपयोग Angular.JS एप्लिकेशन को आरंभ करने के लिए किया जाता है। जब यह निर्देश HTML पृष्ठ में जगह लेता है, तो यह मूल रूप से कोणीय को बताता है कि यह HTML पृष्ठ एक कोणीय.जेएस अनुप्रयोग है।
नीचे दिए गए उदाहरण से पता चलता है कि एनजी-ऐप निर्देश का उपयोग कैसे करें। इस उदाहरण में, हम बस यह दिखाने जा रहे हैं कि सामान्य HTML एप्लिकेशन को कोणीयजेएस एप्लिकेशन कैसे बनाया जाए।
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
कोड स्पष्टीकरण:
- "एनजी-ऐप" निर्देश को यह संकेत देने के लिए हमारे div टैग में जोड़ा जाता है कि यह एप्लिकेशन कोणीय.js अनुप्रयोग है। ध्यान दें कि एनजी-ऐप निर्देश किसी भी टैग पर लागू किया जा सकता है, इसलिए इसे बॉडी टैग में भी डाला जा सकता है।
- क्योंकि हमने इस एप्लिकेशन को कोणीय.जेएस एप्लिकेशन के रूप में परिभाषित किया है, इसलिए अब हम कोणीय.जेएस कार्यक्षमता का उपयोग कर सकते हैं। हमारे मामले में, हम केवल 2 तारों को संक्षिप्त करने के लिए अभिव्यक्ति का उपयोग कर रहे हैं।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट स्पष्ट रूप से अभिव्यक्ति के आउटपुट को दिखाता है जो केवल इसलिए संभव हो गया था क्योंकि हमने एप्लिकेशन को कोणीयरज एप्लिकेशन के रूप में परिभाषित किया था।
2) एनजी-इनिट
इसका उपयोग एप्लिकेशन डेटा को इनिशियलाइज़ करने के लिए किया जाता है। कभी-कभी आपको अपने आवेदन के लिए कुछ स्थानीय डेटा की आवश्यकता हो सकती है, यह एनजी-इनिट निर्देश के साथ किया जा सकता है।
नीचे दिए गए उदाहरण से पता चलता है कि एनजी-इनिट निर्देश का उपयोग कैसे करें।
इस उदाहरण में, हम ng-init निर्देश का उपयोग करके "TutorialName" नामक एक चर बनाने जा रहे हैं और पृष्ठ पर उस चर का मान प्रदर्शित करते हैं।
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
कोड स्पष्टीकरण:
- एनजी-इनिट निर्देश हमारे ट्यूटोरियल में "ट्यूटोरियलनाम" नामक एक स्थानीय चर को परिभाषित करने के लिए जोड़ा गया है और इसे दिया गया मूल्य "एंगुलरजेएस" है।
- हम चर नाम "TutorialName" के आउटपुट को प्रदर्शित करने के लिए AngularJs में अभिव्यक्तियों का उपयोग कर रहे हैं, जिसे हमारे एनजी-इन-डायरेक्टिव में परिभाषित किया गया था।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट में,
- परिणाम स्पष्ट रूप से अभिव्यक्ति के उत्पादन को दर्शाता है जिसमें स्ट्रिंग "एंगुलरजेएस" शामिल है। यह स्ट्रिंग "एंगुलरजेएस" के परिणामस्वरूप एनजी-इनिट सेक्शन में वेरिएबल 'ट्यूटोरियलनेम' को सौंपा गया है।
3) एनजी-मॉडल
और अंत में, हमारे पास एनजी-मॉडल निर्देश है, जिसका उपयोग एप्लिकेशन डेटा के लिए HTML नियंत्रण के मूल्य को बांधने के लिए किया जाता है। नीचे दिए गए उदाहरण से पता चलता है कि एनजी-मॉडल निर्देश का उपयोग कैसे करें।
इस उदाहरण में,
- हम "मात्रा" और "मूल्य" नामक 2 चर बनाने जा रहे हैं। ये चर 2 पाठ इनपुट नियंत्रणों से बंधे होने वाले हैं।
- फिर हम मूल्य और मात्रा दोनों के गुणन के आधार पर कुल राशि प्रदर्शित करने जा रहे हैं।
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
कोड स्पष्टीकरण:
- एनजी-इनिट निर्देश हमारे डिव टैग में 2 स्थानीय चर को परिभाषित करने के लिए जोड़ा गया है; एक को "मात्रा" और दूसरे को "मूल्य" कहा जाता है।
- अब हम क्रमशः "लोक" और "पंजीकरण मूल्य" के पाठ बक्से को हमारे स्थानीय चरों "मात्रा" और "मूल्य" के पाठ बॉक्स को बांधने के लिए एनजी-मॉडल निर्देश का उपयोग कर रहे हैं।
- अंत में, हम एक अभिव्यक्ति के माध्यम से कुल दिखा रहे हैं, जो मात्रा और मूल्य चर का गुणन है।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
- आउटपुट स्पष्ट रूप से लोगों और पंजीकरण मूल्य के लिए मूल्यों के गुणन को दर्शाता है।
अब, यदि आप टेक्स्ट बॉक्स में जाते हैं और लोग और पंजीकरण मूल्य बदल जाते हैं, तो कुल स्वचालित रूप से बदल जाएगा।
- उपरोक्त आउटपुट सिर्फ कोणीयजे में डेटा बाइंडिंग की शक्ति को दर्शाता है, जो एनजी-मॉडल निर्देश के उपयोग के साथ प्राप्त किया जाता है।
4) एनजी-रिपीट
इसका उपयोग HTML तत्व को दोहराने के लिए किया जाता है। नीचे दिए गए उदाहरण से पता चलता है कि एनजी-रिपीट निर्देश का उपयोग कैसे करें।
इस उदाहरण में,
- हम एक सरणी चर में अध्याय नामों की एक सरणी रखने जा रहे हैं और
- फिर सूची आइटम के रूप में सरणी के प्रत्येक तत्व को प्रदर्शित करने के लिए एनजी-दोहराने निर्देश का उपयोग करें
Event Registration Guru99 Global Event
- {{names}}
कोड स्पष्टीकरण:
- एनजी-इनिट निर्देश को "अध्याय" नामक एक चर को परिभाषित करने के लिए हमारे div टैग में जोड़ा जाता है जो एक सरणी चर है जिसमें 3 तार होते हैं।
- एनजी-रिपीट तत्व का उपयोग इनलाइन वैरिएबल को "नाम" घोषित करने और अध्याय एरे में प्रत्येक तत्व के माध्यम से जाने के लिए किया जाता है।
- अंत में, हम स्थानीय इनलाइन वैरिएबल के नाम का मान दिखा रहे हैं। '
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
- उपर्युक्त आउटपुट से पता चलता है कि एनजी-रिपीट निर्देश ने "अध्याय" नामक सरणी में प्रत्येक मान लिया और सरणी में प्रत्येक आइटम के लिए HTML सूची आइटम बनाया।
सारांश
- HTML की कार्यक्षमता को बढ़ाने के लिए निर्देशों का उपयोग किया जाता है। कोणीय इनबिल्ट निर्देश जैसे प्रदान करता है
- एनजी-ऐप - इसका उपयोग कोणीय अनुप्रयोग को प्रारंभ करने के लिए किया जाता है।
- एनजी-इनिट - इसका उपयोग एप्लिकेशन वेरिएबल बनाने के लिए किया जाता है
- एनजी-मॉडल - इसका उपयोग एप्लिकेशन डेटा को HTML नियंत्रणों को बांधने के लिए किया जाता है
- एनजी-रिपीट - कोणीय का उपयोग करके तत्वों को दोहराने के लिए उपयोग किया जाता है।