Course Progress 8%

AngularJS Expressions

← AngularJS Get Started AngularJS Modules →

AngularJS Expressions का उपयोग HTML के अंदर dynamic data को display करने और simple calculations करने के लिए किया जाता है। ये expressions देखने में JavaScript जैसे होते हैं, लेकिन ये AngularJS के context में evaluate होते हैं और ज़्यादा safe और controlled होते हैं।

AngularJS expressions की मदद से HTML template static नहीं रहता, बल्कि runtime पर data के अनुसार change होता रहता है।

AngularJS Expressions कहाँ लिखे जाते हैं

AngularJS expressions दो तरीकों से लिखे जा सकते हैं:

  • Double curly braces का उपयोग करके {{ expression }}
  • Directives के अंदर, जैसे ng-bind

सबसे common तरीका curly braces का ही होता है।

<p>{{ 5 + 5 }}</p>

AngularJS Expressions और JavaScript Expressions में Difference

AngularJS expressions JavaScript expressions जैसे दिखते हैं, लेकिन इनमें कुछ differences होते हैं:

  • AngularJS expressions if, for, या while statements support नहीं करते
  • AngularJS expressions में exceptions throw नहीं होते
  • Undefined या null values पर error नहीं आता
  • Expressions AngularJS scope के अंदर evaluate होते हैं

Numbers के साथ Expressions

AngularJS expressions का उपयोग numbers के साथ calculation करने के लिए किया जा सकता है।

<div ng-app ng-init="a=10; b=20">
  <p>Total: {{ a + b }}</p>
  <p>Multiplication: {{ a * b }}</p>
</div>

यहाँ AngularJS automatically values calculate करके output दिखाता है।

Strings के साथ Expressions

Strings को concatenate करने के लिए भी expressions का उपयोग किया जा सकता है।

<div ng-app ng-init="firstName='Rahul'; lastName='Sharma'">
  <p>Full Name: {{ firstName + ' ' + lastName }}</p>
</div>

Objects के साथ Expressions

AngularJS में objects की properties को expressions के जरिए access किया जा सकता है।

<div ng-app ng-init="person={name:'Amit', age:25}">
  <p>Name: {{ person.name }}</p>
  <p>Age: {{ person.age }}</p>
</div>

Arrays के साथ Expressions

Array elements को index के जरिए access किया जाता है।

<div ng-app ng-init="colors=['Red','Green','Blue']">
  <p>First Color: {{ colors[0] }}</p>
  <p>Second Color: {{ colors[1] }}</p>
</div>

ng-bind के साथ Expressions

ng-bind directive expressions का alternative तरीका है।

<p ng-bind="message"></p>

यह code {{ message }} जैसा ही काम करता है, लेकिन page load के समय flash of unstyled content को avoid करता है।

Expressions और ng-model का Relation

Expressions और ng-model के बीच direct connection होता है।

<div ng-app ng-init="name='AngularJS'">
  <input type="text" ng-model="name">
  <p>Hello {{ name }}</p>
</div>

यह example two-way data binding को दिखाता है।

AngularJS Expressions और Filters

Expressions के साथ filters का उपयोग करके data को format किया जा सकता है।

<div ng-app ng-init="price=2500">
  <p>Price: {{ price | currency }}</p>
</div>

यह filter number को currency format में बदल देता है।

AngularJS Expressions का Use क्यों करें

AngularJS expressions के फायदे:

  • HTML में directly dynamic data show होता है
  • JavaScript code कम लिखना पड़ता है
  • UI automatically update होता है
  • Code readable और clean रहता है

Summary

इस chapter में आपने सीखा:

  • AngularJS expressions क्या होते हैं
  • Expressions को HTML में कैसे use किया जाता है
  • Numbers, strings, objects और arrays के साथ expressions
  • ng-bind और expressions का difference
  • Filters के साथ expressions का उपयोग
← AngularJS Get Started AngularJS Modules →
  • Home