عبارات (Expressions)
اینجا با «عبارات AngularJS» آشنا می شویم. «عبارت (Expression)» یعنی فرمول یا ترکیب مقادیر. نتیجه همان جا نمایش داده می شود. مثل ماشین حساب داخل متن. همچنین می توانیم با «ng-bind» همین کار را انجام دهیم.
تعریف عبارت در AngularJS
عبارت داخل {{ }} نوشته می شود. یا داخل ویژگی «ng-bind». موتور AngularJS عبارت را حل می کند و نتیجه را برمی گرداند.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
اگر ng-app نباشد
بدون «ng-app»، عبارت حل نمی شود. متن خام نمایش داده می شود. مثل ماشین حساب خاموش.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
تغییر استایل با عبارت
می توان مقدار رنگ را با عبارت کنترل کرد. سپس ورودی رنگ، پس زمینه را تغییر می دهد.
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{ myCol }}" ng-model="myCol">
</div>
اعداد در عبارات
اعداد مانند جاوااسکریپت کار می کنند. جمع، تفریق یا ضرب ممکن است.
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
همین مثال با «ng-bind» نیز ممکن است. خروجی داخل span نمایش داده می شود.
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
رشته ها در عبارات
«رشته (String)» متن است. می توان نام و نام خانوادگی را ترکیب کرد.
<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>
آبجکت ها در عبارات
«آبجکت (Object)» مجموعه ویژگی هاست. می توان به ویژگی ها دسترسی گرفت.
<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>
آرایه ها در عبارات
«آرایه (Array)» لیست مقادیر است. می توان با اندیس به عضو رسید.
<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 مانند جاوااسکریپت، عملگر و متغیر دارند. اما داخل HTML نوشته می شوند. شرط و حلقه ندارند. فیلتر دارند.
برای مرور مفاهیم پایه، صفحه عبارات AngularJS را نگه دار. سپس به صفحه معرفی برگرد. بعد هم به ماژول ها برو.
جمع بندی سریع
- {{ }} خروجی را همان جا نمایش می دهد.
- بدون ng-app هیچ عبارتی حل نمی شود.
- ng-bind معادل نوشتن {{ }} است.
- عدد، رشته، آبجکت و آرایه پشتیبانی می شوند.