با در این پست می خواهیم در مورد عبارات یا Expression ها رد AngularJs صحبت کنیم . عبارات در انگولار جی اس داخل دو تا براکت نوشته می شن : {{ عبارت }} . به علاوه مثل دستور ng-bind ، کارشون این هست که داده ها رو به HTML منتقل کنند و در هر جایی که قرار دارند اون داده رو جایگزین خودشون کنند .
همچنین عبارات Angular Js خیلی شبیه به عبارات در Java Script هستند و می شه از متغیر ، عملگر ها و دستورات خاصی داخل اونها استفاده کرد مثلا : {{ ۵ + ۵ }} یا {{ 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]
اگر مثال بالا را بدون استفاده از عبارت منظم و با دستور 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 از فیلترها پشتیبانی می کند.
من معتقدم که حتی اگر AngularJS واقعا آسان است برای شروع، واقعا برای گرفتن آن پیچیده است.
https://www.welookups.com/angular/angular_expressions.html