آموزش عبارات (Expression) در AngularJs

در این پست می خواهیم در مورد عبارات یا Expression ها رد AngularJs صحبت کنیم . عبارات در انگولار جی اس داخل دو تا براکت نوشته می شن : {{ عبارت }} . به علاوه مثل دستور ng-bind ، کارشون این هست که داده ها رو به HTML منتقل کنند و در هر جایی که قرار دارند اون داده رو جایگزین خودشون کنند .

همچنین عبارات Angular Js خیلی شبیه به عبارات در Java Script هستند و می شه از متغیر ، عملگر ها و دستورات خاصی داخل اونها استفاده کرد مثلا : {{ ۵ + ۵ }} یا {{ 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>
خودتان امتحان کنید

اگر دستور 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>
خودتان امتحان کنید

اعداد در AngularJs

اعداد در انگولار جی اس شبیه جاوا اسکریپت هستند:

<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

رشته های متنی نیز در انگولار شبیه جاوا اسکریپت هستند . ببینید :

<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>
خودتان امتحان کنید
در همین رابطه :   ايجاد يك ويرايشگر متن سازگار با تمام مرورگرها [JavaScript]

اشیا و شی گرایی در AngularJs

اشیا هم در انگولار تا حد خیلی زیادی شبیه به جاوا اسکریپت هستند و روش ایجاد و به کارگیری شان یکی است:

<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

در مورد آرایه ها نیز همان موضوع بالا صادق است:

<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

  • شبیه عبارت در جاوااسکریپت ، عبارت Angularjs هم همانند می تواند حاوی لیترال ها ، عملگرها و متغیرها باشد.
  • بر خلاف عبارت در جاوااسکریپت ، عبارت Angularjs می تواند در داخل کدهای HTML قرار بگیرد.
  • بر خلاف عبارت در جاوااسکریپت ، عبارت Angularjs از دستورات شرطی، حلقه ها و ایکسپشن ها پشتیبانی نمی کند.
  • بر خلاف عبارت در جاوااسکریپت ، عبارت Angularjs از فیلترها پشتیبانی می کند.

منبع

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

")/*]]>*/
More in عكاسی
افکتی جالب برای زیباتر کردن عکس [با یک فایل psd]

در اين بحث تمام چيزي كه به شما ارائه مي كنيم يك فايل psd به عنوان قالب است كه با...

Close