वेब-आधारित एप्लिकेशन बनाते समय, जल्दी या बाद में आपके एप्लिकेशन को DOM इवेंट्स जैसे माउस क्लिक, मूव्स, कीबोर्ड प्रेस, चेंज इवेंट आदि को हैंडल करना होगा।
AngularJS कार्यक्षमता जोड़ सकता है जिसका उपयोग ऐसी घटनाओं को संभालने के लिए किया जा सकता है।
उदाहरण के लिए, यदि पृष्ठ पर एक बटन है और आप बटन को क्लिक करने पर कुछ संसाधित करना चाहते हैं, तो हम एनजी-क्लिक इवेंट निर्देश का उपयोग कर सकते हैं।
हम इस पाठ्यक्रम के दौरान घटना के निर्देशों पर विस्तार से गौर करेंगे।
इस ट्यूटोरियल में, आप सीखेंगे-
- एनजी-क्लिक निर्देश क्या है?
- एनजी-शो निर्देश क्या है?
- एनजी-छिपाने का निर्देश क्या है?
एनजी-क्लिक निर्देश क्या है?
"एनजी क्लिक निर्देश" जब HTML में एक तत्व क्लिक कस्टम व्यवहार लागू करने के लिए प्रयोग किया जाता है। यह आम तौर पर बटन के लिए उपयोग किया जाता है क्योंकि यह उन घटनाओं को जोड़ने के लिए सबसे आम जगह है जो उपयोगकर्ता द्वारा किए गए क्लिकों का जवाब देते हैं
आइए एक साधारण उदाहरण देखें कि हम क्लिक इवेंट को कैसे लागू कर सकते हैं।
इस उदाहरण में, हमारे पास एक काउंटर वैरिएबल होगा जो उपयोगकर्ता द्वारा एक बटन क्लिक करने पर मूल्य में वृद्धि होगी।
Event Registration Guru99 Global Event
The Current Count is {{count}}
कोड स्पष्टीकरण:
- हम पहले स्थानीय वेरिएबल काउंट का मान 0 पर सेट करने के लिए एनजी-इनिट निर्देश का उपयोग कर रहे हैं।
- फिर हम बटन पर एनजी-क्लिक इवेंट निर्देश शुरू कर रहे हैं। इस निर्देश में, हम 1 से गणना चर के मूल्य को बढ़ाने के लिए कोड लिख रहे हैं।
- यहां हम उपयोगकर्ता के लिए गणना चर का मान प्रदर्शित कर रहे हैं।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
उपरोक्त आउटपुट से,
- हम देख सकते हैं कि बटन "वृद्धि" प्रदर्शित किया गया है और गणना चर का मूल्य शुरू में शून्य है।
- जब आप इंक्रीमेंट बटन पर क्लिक करते हैं, तो गणना का मान उसी हिसाब से बढ़ जाता है जैसा कि नीचे दिए गए आउटपुट इमेज में दिखाया गया है।
एनजी-शो निर्देश क्या है?
ng- शो निर्देश का उपयोग किसी दिए गए HTML तत्व को दिखाने या छुपाने के लिए किया जाता है जो ngShow विशेषता को प्रदान की गई अभिव्यक्ति के आधार पर होता है। बैकग्राउंड में, एलिमेंट को तत्व पर .ng-hide CSS क्लास को हटाकर या जोड़कर तत्व को दिखाया या छिपाया जाता है।
बैकग्राउंड में, एलिमेंट को तत्व पर .ng-Hide CSS क्लास को हटाकर या जोड़कर तत्व को दिखाया या छिपाया जाता है।
आइए एक उदाहरण देखें कि हम एक छिपे हुए तत्व को प्रदर्शित करने के लिए "एनशो इवेंट" निर्देश का उपयोग कैसे कर सकते हैं।
Event Registration Guru99 Global Event
Angular
कोड स्पष्टीकरण:
- हम बटन तत्व के एनजी-क्लिक इवेंट निर्देश संलग्न कर रहे हैं। यहाँ हम "ShowHide" नामक एक फ़ंक्शन का संदर्भ दे रहे हैं जो हमारे नियंत्रक में परिभाषित किया गया है - DemoController।
- हम एनजी-शो विशेषता को एक div टैग से जोड़ रहे हैं जिसमें पाठ कोणीय है। यह वह टैग है जिसे हम एनजी-शो विशेषता के आधार पर दिखाने / छिपाने जा रहे हैं।
-
नियंत्रक में, हम "इस्विविज़" सदस्य चर को स्कोप ऑब्जेक्ट में संलग्न कर रहे हैं। यह विशेषता div कंट्रोल की दृश्यता को नियंत्रित करने के लिए एनजी-शो कोणीय विशेषता (चरण # 2) को पारित किया जाएगा। हम शुरू में इसे झूठे के लिए सेट कर रहे हैं ताकि जब पृष्ठ पहली बार प्रदर्शित हो तो div टैग छिपा हो जाएगा।
नोट: - जब गुण एनजी-शो को सही पर सेट किया जाता है, तो बाद के नियंत्रण जो हमारे मामले में div टैग है, उपयोगकर्ता को दिखाया जाएगा। जब एनजी-शो विशेषता को गलत पर सेट किया जाता है तो नियंत्रण उपयोगकर्ता से छिपाया जाएगा।
- हम ShowHide फ़ंक्शन में कोड जोड़ रहे हैं जो IsV अदृश्य सदस्य चर को सही पर सेट करेगा ताकि उपयोगकर्ता को div टैग दिखाया जा सके।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट: १
आउटपुट से,
- आप शुरू में देख सकते हैं कि जिस div टैग में "AngularJS" टेक्स्ट है, वह नहीं दिखाया गया है और इसका कारण यह है कि अदृश्य गुंजाइश ऑब्जेक्ट को शुरू में गलत पर सेट किया जाता है, जो बाद में div टैग के एनजी-शो निर्देश के लिए पारित हो जाता है।
- जब आप "Show AngularJS" बटन पर क्लिक करते हैं, तो यह सही होने के लिए अदृश्य सदस्य चर को बदलता है और इसलिए उपयोगकर्ता को "Angular" पाठ दिखाई देता है। नीचे आउटपुट उपयोगकर्ता को दिखाया जाएगा।
आउटपुट अब कोणीय पाठ के साथ div टैग दिखाता है।
एनजी-छिपाने का निर्देश क्या है?
साथ एनजी-हाइड निर्देश एक तत्व अगर अभिव्यक्ति सत्य है छिपा दिया जाएगा। यदि अभिव्यक्ति FALSE है तो तत्व दिखाया जाएगा। बैकग्राउंड में, एलिमेंट को तत्व पर .ng-hide CSS क्लास को हटाकर या जोड़कर तत्व को दिखाया या छिपाया जाता है।
एनजी-छिपाने के साथ दूसरी तरफ, तत्व छिपा हुआ है अगर अभिव्यक्ति सच है और यह दिखाया जाएगा कि क्या यह गलत है।
आइए इसी तरह के उदाहरण को देखें जैसे कि ngShow के लिए दिखाया गया है कि कैसे ngHide विशेषता का उपयोग किया जा सकता है।
Event Registration Guru99 Global Event
Angular
कोड स्पष्टीकरण:
- हम बटन तत्व के एनजी-क्लिक इवेंट निर्देश संलग्न कर रहे हैं। यहाँ हम ShowHide नामक एक फंक्शन का संदर्भ दे रहे हैं, जो हमारे कंट्रोलर - DemoController में परिभाषित है।
- हम एनजी-छिपाने की विशेषता को एक div टैग से जोड़ रहे हैं जिसमें पाठ कोणीय है। यह टैग है, जिसे हम एनजी-शो विशेषता के आधार पर दिखाने / छिपाने जा रहे हैं।
- नियंत्रक में, हम isV अदृश्य सदस्य चर को स्कोप ऑब्जेक्ट में संलग्न कर रहे हैं। यह विशेषता div कंट्रोल की दृश्यता को नियंत्रित करने के लिए एनजी-शो कोणीय विशेषता को पारित किया जाएगा। हम शुरू में इसे झूठे के लिए सेट कर रहे हैं ताकि जब पृष्ठ पहली बार प्रदर्शित हो तो div टैग छिपा हो जाएगा।
- हम ShowHide फ़ंक्शन में कोड जोड़ रहे हैं जो IsV अदृश्य सदस्य चर को सही पर सेट करेगा ताकि उपयोगकर्ता को div टैग दिखाया जा सके।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
आउटपुट से,
- आप शुरू में देख सकते हैं कि जिस div टैग में "AngularJs" पाठ है, उसे शुरू में दिखाया गया है क्योंकि झूठे का गुण मान ng-hide निर्देश में भेजा जाता है।
- जब हम "Hide Angular" बटन पर क्लिक करते हैं तो ट्रू का प्रॉपर्टी वैल्यू ng-hide डायरेक्टिव को भेज दिया जाता है। इसलिए नीचे आउटपुट दिखाया जाएगा, जिसमें "कोणीय" शब्द छिपा होगा।
AngularJS इवेंट श्रोता निर्देश
आप इनमें से एक या अधिक निर्देशों का उपयोग करके अपने HTML तत्वों में AngularJS ईवेंट श्रोताओं को जोड़ सकते हैं:
- एनजी-धुंधला
- परिवर्तन
- एनजी क्लिक
- एनजी-कॉपी
- एनजी-कट
- ng-dblclick
- एनजी-फोकस
- एनजी-कीडाउन
- एनजी-कीप
- एनजी-कीप
- एनजी-मूसडाउन
- एनजी-माउस
- ng-mouseleave
- एनजी-मूसमोव
- एनजी-माउसओवर
- एनजी-माउसअप
- एनजी-पेस्ट
सारांश
- उपयोगकर्ता के हस्तक्षेप जैसे बटन क्लिक, कीबोर्ड और माउस क्लिक इत्यादि से उत्पन्न घटनाओं का जवाब देने के लिए कस्टम कोड को जोड़ने के लिए इवेंट निर्देशों का उपयोग किया जाता है।
- सबसे सामान्य घटना निर्देश एनजी-क्लिक निर्देश है जिसका उपयोग क्लिक घटनाओं को संभालने के लिए किया जाता है। इसका सबसे आम उपयोग बटन क्लिक के लिए है जिसमें एक बटन क्लिक का जवाब देने के लिए कोड जोड़ा जा सकता है।
- एचटीएमएल तत्व एनजी-शो और एनजी-छिपाने वाले कोणीय विशेषताओं का उपयोग करके तदनुसार उपयोगकर्ता को छिपाया या दिखाया जा सकता है।