AngularJS एक्सप्रेशंस: ARRAY, ऑब्जेक्ट्स, $ eval, स्ट्रिंग्स (उदाहरण)

विषय - सूची:

Anonim

कोणीय जेएस एक्सप्रेशन क्या है?

अभिव्यक्तियाँ चर हैं जिन्हें दोहरे ब्रेसिज़ {{}} में परिभाषित किया गया था। वे आमतौर पर कोणीय जेएस के भीतर उपयोग किए जाते हैं, और आप उन्हें हमारे पिछले ट्यूटोरियल में देखेंगे।

इस ट्यूटोरियल में, आप सीखेंगे-

  • उदाहरण के साथ Angular.js अभिव्यक्तियों की व्याख्या करें
  • AngularJS नंबर
  • AngularJS स्ट्रिंग्स
  • AngularJS ऑब्जेक्ट्स
  • AngularJS Arrays
  • AngularJS अभिव्यक्ति की क्षमता और सीमाएं
  • भाव और $ eval के बीच का अंतर

एक उदाहरण के साथ Angular.js अभिव्यक्तियों की व्याख्या करें

AngularJS एक्सप्रेशन वे हैं जो डबल ब्रेसेस {{एक्सप्रेशन}} के अंदर लिखे गए हैं।

वाक्य - विन्यास:

एक अभिव्यक्ति का एक सरल उदाहरण {{5 + 6}} है।

Angular.JS एक्सप्रेशंस का उपयोग एचटीएमएल को उसी तरह से करने के लिए किया जाता है जैसे एनजी-बाइंड डायरेक्टिव। AngularJS उस स्थान पर डेटा को बिल्कुल प्रदर्शित करता है, जहाँ अभिव्यक्ति रखी गई है।

आइए, Angular.JS अभिव्यक्तियों के एक उदाहरण को देखें।

इस उदाहरण में, हम केवल एक अभिव्यक्ति के रूप में संख्याओं का एक सरल जोड़ दिखाना चाहते हैं।

Event Registration

Guru99 Global Event


Addition : {{6+9}}

कोड स्पष्टीकरण:

  1. हमारे उदाहरण में एनजी-ऐप निर्देश रिक्त है जैसा कि ऊपर स्क्रीनशॉट में दिखाया गया है। इसका मतलब केवल यह है कि कोड से जुड़े नियंत्रक, निर्देश, सेवाओं को असाइन करने के लिए कोई मॉड्यूल नहीं है।
  2. हम एक सरल अभिव्यक्ति जोड़ रहे हैं जो 2 संख्याओं को जोड़कर देखता है।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

आउटपुट से,

  • यह देखा जा सकता है कि दो संख्याओं 9 और 6 का जोड़ होता है और 15 का जोड़ा मूल्य प्रदर्शित होता है।

कोणीय.जेएस संख्या

अभिव्यक्तियों का उपयोग संख्याओं के साथ भी काम करने के लिए किया जा सकता है। आइए संख्याओं के साथ Angular.JS अभिव्यक्तियों का एक उदाहरण देखें।

इस उदाहरण में, हम केवल मार्जिन और लाभ नामक 2 नंबर चर का एक सरल गुणन दिखाना चाहते हैं और उनके गुणक मूल्य को प्रदर्शित करते हैं।

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

कोड स्पष्टीकरण:

  1. एनजी-इनिट निर्देश का उपयोग कोणीय.जेएस में चर और उनके संबंधित मूल्यों को दृश्य में ही परिभाषित करने के लिए किया जाता है। यह किसी भी प्रोग्रामिंग भाषा में कोड करने के लिए स्थानीय चर को परिभाषित करने जैसा है। इस मामले में, हम मार्जिन और लाभ नामक 2 चर को परिभाषित कर रहे हैं और उन्हें मान प्रदान कर रहे हैं।
  2. हम फिर 2 स्थानीय चर का उपयोग कर रहे हैं और उनके मूल्यों को बढ़ा रहे हैं।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

आउटपुट से,

  • यह स्पष्ट रूप से देखा जा सकता है कि 2 नंबर 2 और 200 का गुणन होता है, और 400 का गुणा मूल्य प्रदर्शित होता है।

AngularJS स्ट्रिंग्स

अभिव्यक्तियों का उपयोग स्ट्रिंग्स के साथ भी काम करने के लिए किया जा सकता है। आइए तार के साथ कोणीय जेएस अभिव्यक्तियों का एक उदाहरण देखें।

इस उदाहरण में, हम "फर्स्टनाम" और "लास्टनाम" के 2 स्ट्रिंग्स को परिभाषित करने जा रहे हैं और उन्हें तदनुसार अभिव्यक्ति का उपयोग करके प्रदर्शित करते हैं।

Event Registration

Guru99 Global Event


   First Name : {{firstName}}
   last Name : {{lastName}}

कोड स्पष्टीकरण:

  1. एनजी-इनिट निर्देश का उपयोग चर को पहले नाम के साथ परिभाषित किया जाता है "गुरु" और चर अंतिम नाम के साथ "99" के मान के साथ।
  2. फिर हम इन चर के मूल्य तक पहुँचने के लिए {{firstName}} और {{lastName}} के भावों का उपयोग कर रहे हैं और तदनुसार दृश्य में प्रदर्शित करते हैं।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

आउटपुट से, यह स्पष्ट रूप से देखा जा सकता है कि स्क्रीन पर FirstName और LastName के मान प्रदर्शित होते हैं।

Angular.JS ऑब्जेक्ट्स

एक्सप्रेशन का उपयोग जावास्क्रिप्ट ऑब्जेक्ट्स के साथ भी काम करने के लिए किया जा सकता है।

आइए जावास्क्रिप्ट वस्तुओं के साथ कोणीय.जेएस भावों के एक उदाहरण को देखें। एक जावास्क्रिप्ट ऑब्जेक्ट में एक मान-मूल्य जोड़ी होती है।

नीचे एक जावास्क्रिप्ट ऑब्जेक्ट के सिंटैक्स का एक उदाहरण है।

वाक्य - विन्यास:

var car = {type:"Ford", model:"Explorer", color:"White"};

इस उदाहरण में, हम एक वस्तु को एक व्यक्ति वस्तु के रूप में परिभाषित करने जा रहे हैं, जिसमें "FirstName" और "lastName" के 2 मुख्य मूल्य जोड़े होंगे।

Event Registration

Guru99 Global Event


   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

कोड स्पष्टीकरण:

  1. एनजी-इनिट निर्देश का उपयोग ऑब्जेक्ट व्यक्ति को परिभाषित करने के लिए किया जाता है जिसमें बदले में "गुरु" और "99" के मान के साथ चर नाम के साथ पहले नाम के प्रमुख मूल्य जोड़े होते हैं।
  2. फिर हम इन चरों के मूल्य तक पहुँचने और तदनुसार दृश्य में उन्हें प्रदर्शित करने के लिए {{person.firstName}} और {{person.secondName}} के भावों का उपयोग कर रहे हैं। चूंकि वास्तविक सदस्य चर वस्तु व्यक्ति का हिस्सा हैं, इसलिए उन्हें अपने वास्तविक मूल्य तक पहुंचने के लिए डॉट (?) संकेतन के साथ इसे एक्सेस करना होगा।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

आउटपुट से,

  • यह स्पष्ट रूप से देखा जा सकता है कि "फर्स्टनाम" और "सेकंडनेम" के मूल्य स्क्रीन पर प्रदर्शित होते हैं।

AngularJS Arrays

अभिव्यक्तियों को सरणियों के साथ भी काम करने के लिए इस्तेमाल किया जा सकता है। आइए सरणियों के साथ कोणीय जेएस अभिव्यक्तियों का एक उदाहरण देखें।

इस उदाहरण में, हम एक एरे को परिभाषित करने जा रहे हैं जो 3 विषयों में एक छात्र के अंक को धारण करने वाला है। दृश्य में, हम इन चिह्नों का मान तदनुसार प्रदर्शित करेंगे।

Event Registration

Guru99 Global Event


Student Marks
   Subject1 : {{marks[0] }}
   Subject2 : {{marks[1] }}
   Subject3 : {{marks[2] }}
   

कोड स्पष्टीकरण:

  1. एनजी-इनिट निर्देश का उपयोग 1, 15 और 19 के 3 मूल्यों के साथ "अंक" नाम के साथ सरणी को परिभाषित करने के लिए किया जाता है।
  2. फिर हम एरे के प्रत्येक तत्व को एक्सेस करने के लिए मार्क्स [इंडेक्स] के भावों का उपयोग कर रहे हैं।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

आउटपुट से, यह स्पष्ट रूप से देखा जा सकता है कि प्रदर्शित किए जा रहे निशान, कि सरणी में परिभाषित किए गए हैं।

AngularJS अभिव्यक्ति की क्षमता और सीमाएं

कोणीय.जेएस अभिव्यक्ति क्षमताओं

  1. कोणीय भाव जावास्क्रिप्ट भावों की तरह हैं। इसलिए, इसमें समान शक्ति और लचीलापन है।
  2. JavaScript में, जब आप अपरिभाषित गुणों का मूल्यांकन करने का प्रयास करते हैं, तो यह एक ReferenceError या TypeError उत्पन्न करता है। कोणीय में, अभिव्यक्ति मूल्यांकन क्षमा कर रहा है और एक अपरिभाषित या अशक्त उत्पन्न करता है।
  3. कोई भी प्रदर्शित करने से पहले डेटा को प्रारूपित करने के लिए अभिव्यक्तियों के भीतर फ़िल्टर का उपयोग कर सकता है।

कोणीय जेएस अभिव्यक्ति सीमाएं

  1. वर्तमान में एक कोणीय अभिव्यक्ति में सशर्त, छोरों या अपवादों का उपयोग करने के लिए कोई उपलब्धता नहीं है
  2. एनजी-इनिट डायरेक्टिव के अंदर भी आप एक कोणीय अभिव्यक्ति में कार्यों की घोषणा नहीं कर सकते।
  3. एक कोणीय अभिव्यक्ति में नियमित अभिव्यक्ति नहीं बना सकता है। एक नियमित अभिव्यक्ति प्रतीकों और पात्रों का एक संयोजन है, जिसका उपयोग स्ट्रिंग्स जैसे कि खोजने के लिए किया जाता है। * \। Txt $। इस तरह के भावों को Angular JS अभिव्यक्तियों में इस्तेमाल नहीं किया जा सकता है।
  4. इसके अलावा, कोई भी एक कोणीय अभिव्यक्ति में उपयोग या शून्य नहीं कर सकता है।

अभिव्यक्ति और $ eval के बीच अंतर

$ Eval फ़ंक्शन नियंत्रक के भीतर से ही भावों का मूल्यांकन करने की अनुमति देता है। इसलिए जब अभिव्यक्ति में मूल्यांकन के लिए अभिव्यक्तियों का उपयोग किया जाता है, तो $ ev का उपयोग नियंत्रक फ़ंक्शन में किया जाता है।

आइए इस पर एक सरल उदाहरण देखें।

इस उदाहरण में,

हम केवल 2 नंबरों को जोड़ने और इसे स्कोप ऑब्जेक्ट में उपलब्ध कराने के लिए $ eval फ़ंक्शन का उपयोग करने जा रहे हैं ताकि इसे दृश्य में दिखाया जा सके।

Event Registration


Guru99 Global Event

{{value}}

कोड स्पष्टीकरण:

  1. हम पहले 2 चर 'a' और 'b' को परिभाषित कर रहे हैं, प्रत्येक में 1 का मान है।
  2. हम 2 वेरिएबल्स के अतिरिक्त का मूल्यांकन करने के लिए $ स्कोप। $ Eval फ़ंक्शन का उपयोग कर रहे हैं और इसे स्कोप वैरिएबल 'मान' पर नियत करते हैं।
  3. हम तब दृश्य में केवल चर 'मान' का मान प्रदर्शित कर रहे हैं।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

उपरोक्त आउटपुट नियंत्रक में मूल्यांकन किए गए अभिव्यक्ति के आउटपुट को दर्शाता है। उपरोक्त परिणाम दर्शाते हैं कि $ eval अभिव्यक्ति का उपयोग 2 स्कोप वैरिएबल 'a और b' के अतिरिक्त के साथ किया गया था ताकि रिजल्ट भेजा गया और दृश्य में प्रदर्शित किया जा सके।

सारांश:

  • हमने देखा है कि संख्याओं के सरल जोड़ जैसी अभिव्यक्तियों जैसे नियमित जावास्क्रिप्ट का मूल्यांकन करने के लिए एंगुलर जेएस में अभिव्यक्तियों का उपयोग कैसे किया जा सकता है।
  • एनजी-इनिट निर्देश का उपयोग चर-इन-लाइन को परिभाषित करने के लिए किया जा सकता है जिसका उपयोग दृश्य में किया जा सकता है।
  • अभिव्यक्तियों को आदिम प्रकारों जैसे स्ट्रिंग्स और संख्याओं के साथ काम करने के लिए बनाया जा सकता है।
  • एक्सप्रेशन का उपयोग अन्य प्रकार जैसे जावास्क्रिप्ट ऑब्जेक्ट और एरेज़ के साथ काम करने के लिए भी किया जा सकता है।
  • कोणीय जेएस में अभिव्यक्तियाँ कुछ सीमाएँ हैं जैसे उदाहरण के लिए नियमित अभिव्यक्ति नहीं होना या फ़ंक्शंस, लूप्स या सशर्त कथन का उपयोग करना।