آموزش کار با اصطلاحات در AngularJS Expression
چهارچوب کاری AngularJS، اطلاعات (data) را به وسیله اطلاعات (Expression) به HTML، متصل می کند.
اصطلاحات AngularJS Expression درون یک جفت براکت به صورت {{expression}} نوشته می شوند.
همچنین AngularJS Expression را می توان درون یک اعلان (directive) به صورت ng-bind=”expression” نیز نوشت.
AngularJS عبارت های نوشته شده را پردازش کرده و نتیجه آن ها را در جایی که دقیقا expression نوشته شده است، در خروجی، نشان می دهد.
AngularJS Expression بسیار شبیه دستورات JavaScript expression بوده و می توانند شامل متن (literal)، عبارت های مقایسه ای (operators) و یا متغیرها باشند. برای مثال، کد زیر دو نمونه عبارت AngularJS را نشان می دهد :
| کد مثال عملی |
| کد |
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
|
مثال عملی : در کد مثال عملی زیر، یک عبارت ساده ریاضی نوشته شده که پس از اجرای برنامه، مقدار آن در خروجی نمایش داده خواهد شد :
| کد مثال عملی |
| کد |
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
|
اگر اعلان ng-app directive را در کد فوق حذف کنید، HTML متن عبارت expression را بدون محاسبه و دقیقا همانطور که در کد نوشته شده، در خروجی نشان می دهد :
| کد مثال عملی |
| کد |
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
|
عبارات AngularJS را می توانید در هر جایی که می خواهید بنویسید، برنامه expression را محاسبه کرده و نتیجه آن را بر می گرداند.
برای مثال، می توانید با AngularJS مقدار خاصیت های CSS را تغییر دهید. در کد مثال عملی زیر، رنگ پس زمینه کادر متن به هر رنگی که درون آن بنویسد، تغییر خواهد کرد :
| کد مثال عملی |
| کد |
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
|
| خروجی |
|
آموزش کار با اعداد AngularJS Numbers
اعداد در AngularJS همانند اعداد در زبان جاوا اسکریپت هستند. در کد مثال زیر، دو متغیر تعریف کرده و مقداردهی نموده ایم. سپس با یک عبارت AngularJS، حاصلضرب دو متغیر را در خروجی نشان داه ایم :
| کد مثال عملی |
| کد |
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
|
می توانید به جای نوشتن عبارت expression در کد فوق، از اعلان 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 String
متن ها AngularJS String همانند متن و نوشته در زبان جاوا اسکریپت هستند.
مثال عملی : در کد مثال عملی زیر دو متغیر متنی را تعیین و مقداردهی اولیه کرده ایم. سپس توسط یک expression، دو کلمه را به هم متصل کرده و در خروجی نشان داده ایم :
| کد مثال عملی |
| کد |
<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 Objects
اشیاء (objects) در AngularJS همانند اشیاء در زبان جاوا اسکریپت هستند. در کد مثال عملی زیر، یک شی به نام Person تعریف کرده و دو خاصیت برایش مقداردهی نموده ایم. سپس توسط یک expression مقدار خاصیت lastName را در خروجی نشان داده ایم :
| کد مثال عملی |
| کد |
<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
آرایه ها (Arrays) در AngularJS نیز همانند آرایه ها در زبان جاوا اسکریپت هستند.
در کد مثال عملی زیر، یک آرایه پنج عضوی به نام points را تعریف و مقداردهی کرده ایم. سپس توسط یک expression، مقدار عضو سوم آرایه را در خروجی نشان داده ایم :
| کد مثال عملی |
| کد |
< 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 Expression با JavaScript Expression
همانطور که اشاره کردیم، Angular Expression همانند JavaScript Expression می توانند حاوی متن (literal)، عبارت های مقایسه ای (operators) و متغیرها (variables) باشند.
بر خلاف JavaScript Expression، عبارت Angular Expression را می توانید درون تگ ها و کدهای HTML و CS بنویسید.
از طرف دیگر AngularJS Expression همانند JavaScript Expression ها از دستورات شرطی، حلقه ها، استثناءات و سایر دستورهای اسکریپتی پشتیبانی نمی کنند.
AngularJS Expression از فیلتر (filter) ها پشتیبانی کرده، در حالی که این قابلیت در جاوا اسکریپت وجود ندارد.