एंगुलरजेएस एक्सप्रेशंस


AngularJS एक्सप्रेशंस का उपयोग करके HTML से डेटा को बांधता है


एंगुलरजेएस एक्सप्रेशंस

AngularJS एक्सप्रेशन को डबल ब्रेसिज़ के अंदर लिखा जा सकता है: .{{ expression }}

AngularJS एक्सप्रेशन को एक निर्देश के अंदर भी लिखा जा सकता है: .ng-bind="expression"

AngularJS अभिव्यक्ति को हल करेगा, और परिणाम को ठीक उसी स्थान पर लौटाएगा जहां अभिव्यक्ति लिखी गई है।

एंगुलरजेएस एक्सप्रेशन बहुत हद तक जावास्क्रिप्ट एक्सप्रेशंस की तरह हैं: उनमें लिटरल, ऑपरेटर्स और वेरिएबल हो सकते हैं।

उदाहरण {{ 5 + 5 }} या {{ firstName + " " + lastName }}

उदाहरण

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

यदि आप निर्देश को हटाते हैं ng-app, तो HTML अभिव्यक्ति को हल किए बिना, जैसा है वैसा ही प्रदर्शित करेगा:

उदाहरण

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div>
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

आप जहां चाहें अभिव्यक्ति लिख सकते हैं, AngularJS केवल अभिव्यक्ति को हल करेगा और परिणाम लौटाएगा।

उदाहरण: AngularJS को CSS गुणों के मान को बदलने दें।

नीचे दिए गए इनपुट बॉक्स का रंग बदलकर उसका मान बदलें:

उदाहरण

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol">

</div>


एंगुलरजेएस नंबर

AngularJS नंबर जावास्क्रिप्ट नंबर की तरह हैं:

उदाहरण

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

एक ही उदाहरण का उपयोग कर ng-bind:

उदाहरण

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

उपयोग करना ng-initबहुत आम नहीं है। आप नियंत्रकों के बारे में अध्याय में डेटा को इनिशियलाइज़ करने का एक बेहतर तरीका सीखेंगे।


एंगुलरजेएस स्ट्रिंग्स

AngularJS स्ट्रिंग्स जावास्क्रिप्ट स्ट्रिंग्स की तरह हैं:

उदाहरण

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

एक ही उदाहरण का उपयोग कर ng-bind:

उदाहरण

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

एंगुलरजेएस ऑब्जेक्ट्स

AngularJS ऑब्जेक्ट JavaScript ऑब्जेक्ट की तरह हैं:

उदाहरण

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

<p>The name is {{ person.lastName }}</p>

</div>

एक ही उदाहरण का उपयोग कर ng-bind:

उदाहरण

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

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

AngularJS Arrays

AngularJS सरणियाँ जावास्क्रिप्ट सरणियों की तरह हैं:

उदाहरण

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

एक ही उदाहरण का उपयोग कर ng-bind:

उदाहरण

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

AngularJS एक्सप्रेशंस बनाम जावास्क्रिप्ट एक्सप्रेशंस

जावास्क्रिप्ट अभिव्यक्तियों की तरह, AngularJS अभिव्यक्तियों में शाब्दिक, ऑपरेटर और चर शामिल हो सकते हैं।

जावास्क्रिप्ट अभिव्यक्तियों के विपरीत, AngularJS भाव HTML के अंदर लिखे जा सकते हैं।

एंगुलरजेएस एक्सप्रेशन सशर्त, लूप और अपवादों का समर्थन नहीं करते हैं, जबकि जावास्क्रिप्ट एक्सप्रेशन करते हैं।

एंगुलरजेएस एक्सप्रेशन फिल्टर का समर्थन करते हैं, जबकि जावास्क्रिप्ट एक्सप्रेशन नहीं।

हमारे जावास्क्रिप्ट ट्यूटोरियल में जावास्क्रिप्ट के बारे में जानें ।