a

ABLY مقالات و مطالب مجموعه

دوره آموزشی AngularJS به زبان فارسی - بخش دوم

دوره آموزشی AngularJS به زبان فارسی - بخش دوم

<span style="

style=" "="">

بسم الله الرحمن الرحیم

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک 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

 

نظرات

  • Hannah Martinez
    محسن
    دو شنبه 11 دی 1278 0:00

    ممنون از مطلب خوبتان

    • Judith Bell
      پاسخ
      حسینبهزادی
      دو شنبه 11 دی 1278 0:00

      با عرض سلام
      از لطف شما متشکرم
      یاعلی

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :Phone Number
0713 625 1757 :Phone Number