AngularJS एक्सप्रेशंस: ऐरे, ऑब्जेक्ट्स, $eval, स्ट्रिंग्स
जेम्स हार्टमैन
⚡ स्मार्ट सारांश
AngularJS एक्सप्रेशंस कोड के वे अंश होते हैं जिन्हें डबल ब्रैकेट्स के अंदर रखा जाता है और जो डेटा को सीधे टेम्पलेट से जोड़ते हैं। ये संख्याओं, स्ट्रिंग्स, ऑब्जेक्ट्स और एरेज़ का मूल्यांकन करते हैं, और $eval फ़ंक्शन कंट्रोलर के अंदर से यही मूल्यांकन करता है।
AngularJS एक्सप्रेशंस क्या हैं?
एक्सप्रेशन डबल ब्रैकेट्स के अंदर लिखे गए वेरिएबल होते हैं। {{ }}इनका उपयोग AngularJS में बहुत आम है, और इस श्रृंखला के पिछले ट्यूटोरियल में भी ये दिखाई देते हैं।
⚠️ सहायता सूचना: AngularJS पहुँच गया 31 दिसंबर 2021 को उनका निधन हो गया। और इसे अब कोई और पैच या सुरक्षा सुधार नहीं मिलेगा। नीचे दिया गया सिंटैक्स मौजूदा AngularJS 1.x एप्लिकेशन को बनाए रखने के लिए सटीक है; नए प्रोजेक्ट्स को आधुनिक संस्करण का उपयोग करना चाहिए। कोणीयजहां इंटरपोलेशन ब्रेसेस अभी भी मौजूद हैं लेकिन ng-init और $eval ऐसा न करें।
एक उदाहरण सहित AngularJS एक्सप्रेशंस की व्याख्या करें।
AngularJS एक्सप्रेशन को डबल ब्रैकेट के अंदर लिखा जाता है, जैसे कि {{expression}}.
सिंटेक्स: एक व्यंजक का सरल उदाहरण है {{5 + 6}}.
AngularJS एक्सप्रेशन, ng-bind डायरेक्टिव की तरह ही डेटा को HTML से जोड़ते हैं, और AngularJS डेटा को ठीक उसी स्थान पर प्रदर्शित करता है जहां एक्सप्रेशन रखा गया है।
इस उदाहरण में हम संख्याओं के सरल योग को एक व्यंजक के रूप में दर्शाते हैं।
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app=""> Addition : {{6+9}} </div> </body> </html>
Code स्पष्टीकरण:
- ng-app निर्देश खाली है, जिसका अर्थ है कि कोई मॉड्यूल नियंत्रक प्रदान नहीं करता है। निर्देशोंया इस पृष्ठ पर दी जाने वाली सेवाएं।
- एक सरल व्यंजक दो संख्याओं को जोड़ता है।
आउटपुट:
9 और 6 को जोड़ा जाता है और परिणाम 15 प्रदर्शित होता है।
AngularJS Numbers
व्यंजक संख्याओं के साथ काम करते हैं। यह उदाहरण दो संख्या चरों को गुणा करता है। margin और profitऔर उत्पाद को प्रदर्शित करता है।
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="margin=2;profit=200"> Total profit margin {{margin*profit}} </div> </body> </html>
Code स्पष्टीकरण:
- ng-init निर्देश किसी भी स्थानीय चर की तरह ही व्यू में चर और उनके मानों को परिभाषित करता है। प्रोग्रामिंग भाषा। यहाँ
marginऔरprofitघोषित और आवंटित किए जाते हैं। - फिर यह व्यंजक उन दो स्थानीय चरों को गुणा करता है।
आउटपुट:
2 और 200 का गुणन होता है और गुणनफल, 400, प्रदर्शित होता है।
AngularJS स्ट्रिंग्स
एक्सप्रेशन स्ट्रिंग के साथ भी काम करते हैं। यह उदाहरण परिभाषित करता है firstName और lastName और दोनों को प्रदर्शित करता है।
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="firstName='Guru';lastName='99'"> First Name : {{firstName}}<br> Last Name : {{lastName}} </div> </body> </html>
Code स्पष्टीकरण:
- ng-init निर्देश परिभाषित करता है
firstNameमूल्य के साथ “Guru" तथाlastNameजिसका मान “99” है। - भाव
{{firstName}}और{{lastName}}उन वेरिएबल्स को पढ़ें और उन्हें व्यू में प्रदर्शित करें।
आउटपुट:
दोनों मान स्क्रीन पर दिखाई देते हैं।
एंगुलरजेएस ऑब्जेक्ट्स
भावों के साथ काम करें Javaलिपि ऑब्जेक्ट, जिनमें नाम-मान युग्म होते हैं। एक ऑब्जेक्ट का सिंटैक्स Javaस्क्रिप्ट ऑब्जेक्ट इस प्रकार दिखता है:
var car = {type: "Ford", model: "Explorer", color: "White"};
यह उदाहरण एक को परिभाषित करता है person दो कुंजी-मान युग्मों को धारण करने वाली वस्तु, firstName और lastName.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}"> First Name : {{person.firstName}}<br> Last Name : {{person.lastName}} </div> </body> </html>
Code स्पष्टीकरण:
- ng-init निर्देश ऑब्जेक्ट को परिभाषित करता है
personकुंजी-मान युग्मों के साथfirstNameकरने के लिए सेट "Guru" तथाlastName"99" पर सेट किया गया। - भाव
{{person.firstName}}और{{person.lastName}}उन सदस्यों को पढ़ें। चूंकि वे ऑब्जेक्ट से संबंधित हैं, इसलिए उनके मानों तक पहुंचने के लिए डॉट नोटेशन की आवश्यकता होती है।
आउटपुट:
के मूल्यों firstName और lastName स्क्रीन पर दिखाई दें।
एंगुलरजेएस एरेज़
एक्सप्रेशन एरे के साथ काम करते हैं। यह उदाहरण एक एरे को परिभाषित करता है जिसमें एक छात्र के तीन विषयों के अंक होते हैं और प्रत्येक मान को प्रदर्शित करता है।
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app="" ng-init="marks=[1,15,19]"> Student Marks<br> Subject1 : {{marks[0]}}<br> Subject2 : {{marks[1]}}<br> Subject3 : {{marks[2]}} </div> </body> </html>
Code स्पष्टीकरण:
- ng-init निर्देश सरणी को परिभाषित करता है
marksइन तीन मानों 1, 15 और 19 के साथ। - इस रूप की अभिव्यक्तियाँ
marks[index]प्रत्येक तत्व को पढ़ें।
आउटपुट:
ऐरे में परिभाषित चिह्नों को प्रदर्शित किया जाता है।
AngularJS अभिव्यक्ति क्षमताएं और सीमाएं
क्षमताओं
- AngularJS अभिव्यक्तियाँ मिलती-जुलती हैं Javaस्क्रिप्ट एक्सप्रेशन और अन्य में काफी हद तक समान शक्ति और लचीलापन होता है।
- कहा पे Javaस्क्रिप्ट किसी अपरिभाषित प्रॉपर्टी पर ReferenceError या TypeError उत्पन्न करती है, जबकि AngularJS का मूल्यांकन लचीला होता है और वह अपरिभाषित या शून्य मान देता है।
- डेटा को प्रदर्शित करने से पहले उसे फॉर्मेट करने के लिए एक्सप्रेशन के अंदर फिल्टर लगाए जा सकते हैं।
- त्रिगुणीय ऑपरेटर समर्थित है, इसलिए
{{ isReady ? 'Yes' : 'No' }}यह सही है।
सीमाओं
- AngularJS एक्सप्रेशन के अंदर लूप और एक्सेप्शन हैंडलिंग का उपयोग नहीं किया जा सकता है। सशर्त तर्क केवल टर्नरी ऑपरेटर तक ही सीमित है;
ifबयान उपलब्ध नहीं हैं। - किसी एक्सप्रेशन में फंक्शन घोषित नहीं किए जा सकते, यहां तक कि ng-init डायरेक्टिव के अंदर भी नहीं।
- किसी एक्सप्रेशन के अंदर रेगुलर एक्सप्रेशन नहीं बनाया जा सकता। रेगुलर एक्सप्रेशन प्रतीकों और वर्णों का एक संयोजन है जिसका उपयोग स्ट्रिंग्स से मिलान करने के लिए किया जाता है, जैसे कि...
.*\.txt$और ऐसे शाब्दिक अर्थों को अस्वीकार कर दिया जाता है। - अल्पविराम ऑपरेटर (
,) और यहvoidऑपरेटरों को अनुमति नहीं है।
ng-bind बनाम एक्सप्रेशन ब्रेसेस: किसका उपयोग करें
Double ब्रेसेस और ng-bind डायरेक्टिव एक ही तरह का आउटपुट देते हैं, इसलिए इनके बीच चुनाव करना मनमाना लगता है। लेकिन ऐसा नहीं है। AngularJS के पूरी तरह लोड होने से पहले ये दोनों अलग-अलग तरह से काम करते हैं, और यह अंतर पेज का उपयोग करने वाले व्यक्ति को स्पष्ट रूप से दिखाई देता है।
| पहलू | {{ expression }} | एनजी-बाँध |
|---|---|---|
| इसमें लिखा हुआ | तत्व सामग्री | एक तत्व विशेषता |
| AngularJS लोड होने से पहले | स्क्रीन पर कच्चे ब्रेसेस दिखाई देते हैं | कुछ भी नहीं दिखाया गया |
| पठनीयता | उच्चतर — मान सीधी रेखा में स्थित है | निचला मान एक विशेषता में छिपा हुआ है |
| प्रति तत्व एकाधिक मान | हाँ | नहीं, केवल एक ही बंधन |
| एक बार का बंधन | हाँ, के साथ {{::value}} |
हाँ, के साथ ng-bind="::value" |
कुछ समय के लिए दिखाई देने वाले बिना जोड़ वाले ब्रैकेट्स को अनइंटरपोलेटेड कंटेंट का फ्लैश कहा जाता है, और ऐसा इसलिए होता है क्योंकि ब्राउज़र एंगुलरजेएस द्वारा कंपाइल किए जाने से पहले ही मार्कअप को रेंडर कर देता है। फोल्ड के ऊपर दिखाई देने वाले कंटेंट के लिए ng-bind का उपयोग करें या ng-cloak डायरेक्टिव जोड़ें। अन्य सभी जगहों पर, विशेष रूप से जहां एक ही एलिमेंट के अंदर कई मान दिखाई देते हैं, ब्रैकेट्स अधिक स्पष्ट और पठनीय विकल्प बने रहते हैं।
अभिव्यक्ति और $eval के बीच अंतर
RSI $eval फ़ंक्शन कंट्रोलर के अंदर से एक्सप्रेशन का मूल्यांकन करता है। एक्सप्रेशन का मूल्यांकन व्यू में होता है, जबकि $eval कंट्रोलर कोड में मूल्यांकन करता है।
यह उदाहरण उपयोग करता है $eval दो संख्याओं को जोड़ना और परिणाम को स्कोप ऑब्जेक्ट पर रखना ताकि व्यू उसे प्रदर्शित कर सके।
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <div ng-app="sampleApp" ng-controller="AngularController"> <h1>Guru99 Global Event</h1> {{value}} </div> <script> var sampleApp = angular.module('sampleApp', []); sampleApp.controller('AngularController', function($scope) { $scope.a = 1; $scope.b = 1; $scope.value = $scope.$eval('a+b'); }); </script> </body> </html>
Code स्पष्टीकरण:
- दो स्कोप चर,
aऔरbप्रत्येक का मान 1 है। $scope.$evalयह उनके योग का मूल्यांकन करता है और परिणाम को स्कोप वेरिएबल को असाइन करता है।value.- फिर दृश्य प्रदर्शित होता है
value.
आउटपुट:
आउटपुट में अंदर मूल्यांकित व्यंजक दिखाया गया है। नियंत्रकदो स्कोप वेरिएबल्स का योग व्यू में भेजा जाता है और प्रदर्शित किया जाता है।
