آنگولار داده ها را با استفاده از عبارات(Expressions) به عناصر HTML منتقل میکند. در این فصل با عبارات و نحوه ی عملکرد آنها آشنا خواهیم شد.


 عبارت های AngularJS

عبارت های آنگولار میتوانند داخل یک جفت بریس نوشته شوند : {{ expression }}.

عبارت های آنگولار همچنین میتوانند داخل یک دستور (directive) نوشته شوند : "ng-bind="expression.

آنگولار عبارات را تفسیر میکند و نتیجه را درست در جایی که عبارات قرار گرفته اند ، برمیگرداند.

عبارات(Expressions) آنگولار شبیه عبارات در جاوااسکریپت هستند ؛ آنها میتوانند شامل لیترال ها ، عملگر ها  و متغیر ها باشند.

برای مثال {{ 5 + 5 }} و یا {{ firstName + " " + lastName }}

نمونه مثالی از استفاده از یک عبارت :

<!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>

اگر شما دستور ng-app را حذف کنید ، 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>

شما میتوانید عبارات را در هر جایی که میخواهید بنویسید، آنگولار به سادگی عبارات را تفسیر و  نتیجه را برمیگرداند.

مثال : بیایید ببینیم چطور آنگولار مقدار یک صفت را در CSS را تغییر میدهد. در نمونه مثال زیر با تغییر مقدار عنصر input به یک مقدار معتبر برای یک رنگ ، رنگ پشت زمینه عنصر، به همان رنگ تغییر میکند :

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">

</div>

اعداد در AngularJS

اعداد در آنگولار شبیه اعداد در زبان JavaScript است.

در نمونه مثال زیر متغیر، مقدار دهی شده و حاصل ضرب آنها در پاراگراف به نمایش درمی آید :

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

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

</div>

مثال بالا را میتوان با استفاده از دستور 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

رشته ها در آنگولار درست شبیه رشته در JavaScript است :

<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) در آنگولار شبیه اشیا در JavaScript است :

<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

آرایه ها در آنگولار شبیه آرایه ها در JavaScript است :

<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 و JavaScript

همانند عبارات در JavaScript ، عبارات در AngularJS میتوانند شامل لیترال ها ، عملگر ها و متغیر ها باشند.

برخلاف عبارات در JavaScript ، عبارات در AngularJS میتوانند داخل HTML نوشته شوند.

عبارات در AngularJS از دستورات شرطی و حلقه ها پشتیبانی نمیکنند در حالی که این پشتیبانی در JavaScript وجود دارد.

عبارات در AngularJS از فیلتر ها (filters) پشتیبانی میکنند در حالی که این پشتیبانی در JavaScript وجود ندارد.