انگولار جی اس با استفاده از عبارت ها ، مقادیر را به تگ های html می دهد. در این جلسه با روش تعریف و استفاده از عبارت ها در انگولار جی اس آشنا می شوید.
عبارت های انگولار جی اس به دو شکل می توانند نوشته شوند :
1- عبارت داخل دو تا آکولاد نوشته شود {{عبارت }}
2- عبارت به خاصیت (دایکتیو) ng-bind نسبت داده شود .
در هر صورت انگولار جی اس، عبارت را بررسی و اجرا کرده و نتیجه را به جای آن قرار خواهد داد. عبارت های انگولار جی اس، مشابه عبارت های جاوااسکریپت هستند . مثل :
{{ 5 + 5 }} یا {{ firstName + " " + lastName }}
به مثال زیر توجه کنید :
مثال1:
<!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 را از تگ div بردارید، عبارت اجرا نشده و به همان شکلی که هست نشان داده خواهد شد.
بنابراین می توان در هر قسمت صفحه عبارت دلخواه را نوشت تا انگولار جی اس عبارت را حل کرده و نتیجه را برگرداند .
مثال2 :
در این مثال با تایپ نام رنگ در جعبه متن، رنگ پس زمینه آن تعیین خواهد شد.
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
عبارت های عددی در انگولار جی اس
در انگولار جی اس، امکان استفاده از متغیرها و عبارت های عددی فراهم شده است. مثال زیر را ببینید:
<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-bind رایج نیست و روش های بهتری در جلسات بعدی آموزش داده خواهد شد.
رشته ها در انگولار جی اس
رشته ها در انگولار جی اس، مشابه رشته ها در جاوااسکریپت استفاده می شوند. به مثال زیر دقت کنید.
<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>
اشیا در انگولار جی اس
اشیا در انگولار جی اس، مشابه اشیا در جاوااسکریپت هستند:
<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>
آرایه ها در انگولار جی اس
آرایه ها در انگولار جی اس، مشابه آرایه ها در جاوااسکریپت هستند:
<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>
عبارت های انگولار جی اس با عبارت های جاوااسکریپت
- مشابه عبارت های جاوااسکریپت، عبارت های انگولار جی اس، می توانند شامل ثابت ها، عمگرها و متغیرها باشند.
- بر خلاف عبارت های جاوااسکریپت، عبارت های انگواار جی اس، می توانند داخل HTML نوشته شوند.
- عبارت های انگولار جی اس از ساختارهای شرطی، حلقه های تکرار و استثناها پشتیانی نمی کندد در حالی که عبارت ها جاوااسکریپت پشتیبانی می کنند.
- عبارت های انگولار جی اس، از فیلترها پشتیبانی می کنند ولی عبارت های جاوااسکریپت خیر.