در این پست می خواهیم در مورد عبارات یا 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]
اگر مثال بالا را بدون استفاده از عبارت منظم و با دستور 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