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

द्वारा: जेम्स हार्टमैन जेम्स हार्टमैन
Hours Updated

एंगुलर जेएस एक्सप्रेशन्स क्या है?

एक्सप्रेशन वे वैरिएबल हैं जिन्हें डबल ब्रेसेज़ {{ }} में परिभाषित किया गया था। वे Angular JS में बहुत आम तौर पर उपयोग किए जाते हैं, और आप उन्हें हमारे पिछले ट्यूटोरियल में देख सकते हैं।

Angular.js Expressions को उदाहरण सहित समझाएँ

AngularJS अभिव्यक्तियाँ वे हैं जो डबल ब्रेसेज़ {{expression}} के अंदर लिखी जाती हैं।

सिंटेक्स:

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

Angular.JS एक्सप्रेशन का उपयोग HTML में डेटा को बांधने के लिए उसी तरह किया जाता है जैसे ng-bind डायरेक्टिव का। AngularJS डेटा को ठीक उसी स्थान पर प्रदर्शित करता है जहाँ एक्सप्रेशन रखा गया है।

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

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

Angular.js अभिव्यक्तियाँ

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

    <h1> Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

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

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

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

आउटपुट:

Angular.js अभिव्यक्तियाँ

आउटपुट से,

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

एंगुलर.जेएस Numbers

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

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

एंगुलर.जेएस Numbers

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/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>

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

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

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

आउटपुट:

एंगुलर.जेएस Numbers

आउटपुट से,

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

संबंधित आलेख

AngularJS स्ट्रिंग्स

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

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

AngularJS स्ट्रिंग्स

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

    <h1> Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">

        &nbsp;&nbsp;&nbsp;
        First Name : {{firstName}}<br>&nbsp;&nbsp;&nbsp;
        last Name : {{lastName}}

    </div>

</body>
</html>

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

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

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

आउटपुट:

AngularJS स्ट्रिंग्स

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

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

अभिव्यक्तियों का उपयोग कार्य करने के लिए किया जा सकता है Javaलिपि वस्तुओं को भी.

आइए जावास्क्रिप्ट ऑब्जेक्ट के साथ Angular.JS एक्सप्रेशन का एक उदाहरण देखें। एक जावास्क्रिप्ट ऑब्जेक्ट में नाम-मूल्य युग्म होता है।

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

सिंटेक्स:

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

इस उदाहरण में, हम एक ऑब्जेक्ट को एक व्यक्ति ऑब्जेक्ट के रूप में परिभाषित करने जा रहे हैं जिसमें “firstName” और “lastName” के 2 कुंजी मान जोड़े होंगे।

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">

    &nbsp;&nbsp;&nbsp;
    First Name : {{person.firstName}}<br>&nbsp;&nbsp;&nbsp;
    Last Name : {{person.lastName}}

</div>

</body>
</html>

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

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

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

आउटपुट:

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

आउटपुट से,

  • यह स्पष्ट रूप से देखा जा सकता है कि “firstName” और “secondName” के मान स्क्रीन पर प्रदर्शित होते हैं।

एंगुलरजेएस एरेज़

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

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

एंगुलरजेएस एरेज़

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">

    Student Marks<br>&nbsp;&nbsp;&nbsp;
    Subject1 : {{marks[0] }}<br>&nbsp;&nbsp;&nbsp;
    Subject2 : {{marks[1] }}<br>&nbsp;&nbsp;&nbsp;
    Subject3 : {{marks[2] }}<br>&nbsp;&nbsp;&nbsp;
</div>

</body>
</html>

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

  1. ng-init निर्देश का उपयोग 3, 1 और 15 के 19 मानों के साथ “marks” नाम से सरणी को परिभाषित करने के लिए किया जाता है।
  2. फिर हम सरणी के प्रत्येक तत्व तक पहुँचने के लिए marks [index] की अभिव्यक्तियों का उपयोग कर रहे हैं।

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

आउटपुट:

एंगुलरजेएस एरेज़

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

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

Angular.JS अभिव्यक्ति क्षमताएँ

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

Angular JS अभिव्यक्ति सीमाएँ

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.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>

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

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

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

आउटपुट:

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

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

सारांश

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