دوره آموزشی AngularJS به زبان فارسی - بخش دوم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
دوره آموزش AngularJS
بخش دوم
AngularJS Expressions
عبارت های AngularJS درون یک جفت براکت نوشته می شوند {{ expression }}
عبارت های AngularJS داده ها را به HTML مانند رهنمود ng-bind مقید می کنند. در همان جایی که عبارت های AngularJS را می نویسید در همان جا نیز خروجی شما نمایش داده می شود.
عبارت های AngularJS خیلی به عبارت های JavaScript شبیه هستند. آنها می توانند شامل عنصرهای تکرار شونده، عملگر ها و متغییرها باشند.
مثال
{{ 5 + 5 }}
یا
{{ firstName + " " + lastName }}
مثال
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
اگر شما رهنمود ng-app را حذف کنید، عبارت شما در HTML بدون حل شدن نمایش داده می شود. در واقع اجرا نمی شوند و مانند یک متن ساده نمایش داده میشوند.
مثال:
<!DOCTYPE html>
<html>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
AngularJS Numbers
اعداد درون 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 استفاده نمی کنند، بهتر است مقدار دهی اولیه درون Controller ها که در بخش های بعدی به آن خواهیم پرداخت، انجام شود.
AngularJS Strings
رشته ها نیز در 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
اشیاء نیز در AngularJS شبیه 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 Arrays
ارایه ها نیز در AngularJS شبیه JavaScript هستند.
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The points are {{ points[2] }}</p>
</div>
همان مثال با استفاده از ng-bind
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The points are <span ng-bind="points[2]"></span></p>
</div>
مشاهده تمامی آموزش های دوره AngularJS
نظرات (۱)
با عرض سلام
از لطف شما متشکرم
یاعلی