آموزش عبارات (Expression) در AngularJs

1 دیدگاه

در این پست می خواهیم در مورد عبارات یا Expression ها رد AngularJs صحبت کنیم . عبارات در انگولار جی اس داخل دو تا براکت نوشته می شن : {{ عبارت }} . به علاوه مثل دستور ng-bind ، کارشون این هست که داده ها رو به HTML منتقل کنند و در هر جایی که قرار دارند اون داده رو جایگزین خودشون کنند .

همچنین عبارات Angular Js خیلی شبیه به عبارات در Java Script هستند و می شه از متغیر ، عملگر ها و دستورات خاصی داخل اونها استفاده کرد مثلا : {{ 5 + 5 }} یا {{ firstName + ” ” + lastName }}

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

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

</body>
</html>

[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_expression” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]

اگر دستور ng-app را پاک کنید ، خود عبارت منظم به جای محاسبه مقادیر داخل اون نمایش داده میشه.

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

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

</body>
</html>

[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_expression_2″ style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]


اعداد در AngularJs

اعداد در انگولار جی اس شبیه جاوا اسکریپت هستند:

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

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

</div>

[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]

مثال بالا را به جای عبارت منظم با دستور ng-bind هم بنویسیم :

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

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

</div>

[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_bind_numbers” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]

[stag_alert style=”yellow”]نکته : استفاده از دستور ng-init زیاد مرسوم نیست . در آینده روش های بهتری به جای آن آموزش خواهیم داد.[/stag_alert]


رشته های متنی در AngularJs

رشته های متنی نیز در انگولار شبیه جاوا اسکریپت هستند . ببینید :

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

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

</div>

[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions_strings” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]

در همین رابطه :   معرفی 534 روش مختلف برای Reload صفحه در JavaScript!

اگر مثال بالا را بدون استفاده از عبارت منظم و با دستور ng-bind بنویسیم به این شکل خواهد شد:

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

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

</div>

[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_bind_strings” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]


اشیا و شی گرایی در AngularJs

اشیا هم در انگولار تا حد خیلی زیادی شبیه به جاوا اسکریپت هستند و روش ایجاد و به کارگیری شان یکی است:

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

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

</div>

[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions_objects” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]

و باز هم اگر بخواهیم با دستور ng-bind استفاده کنیم:

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

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

</div>

[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_bind_objects” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]


آرایه ها در AngularJs

در مورد آرایه ها نیز همان موضوع بالا صادق است:

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

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

</div>

[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions_arrays” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]

و با دستور 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>

[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_bind_arrays” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]


مقایسه عبارات در Angularjs و JavaScript

  • شبیه عبارت در جاوااسکریپت ، عبارت Angularjs هم همانند می تواند حاوی لیترال ها ، عملگرها و متغیرها باشد.
  • بر خلاف عبارت در جاوااسکریپت ، عبارت Angularjs می تواند در داخل کدهای HTML قرار بگیرد.
  • بر خلاف عبارت در جاوااسکریپت ، عبارت Angularjs از دستورات شرطی، حلقه ها و ایکسپشن ها پشتیبانی نمی کند.
  • بر خلاف عبارت در جاوااسکریپت ، عبارت Angularjs از فیلترها پشتیبانی می کند.

منبع

 

دسته بندی : JavaScript

یک نظر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *