السّلام علیک یا اباعبداللّه الحسین

سبد (0)

تبلیغات

آموزش انگولار-عبارات

انگولار، با استفاده از عبارات(Expressions)، داده ها را به HTML پیوند می دهد. 


عبارات انگولار-Angular Expressions

عبارات انگولار، بین دابل_آکولاد قرار می گیرند مانند: {{عبارت مورد نظر}}

عبارات انگولار، دقیقا مانند دستور ng-bind، داده ها را به HTML پیوند می دهند. 

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

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

بعنوان مثال، {{5+5}}  یا {{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>
خودتان امتحان کنید »

اعداد در انگولار

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

مثالی از انگولار

<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>
خودتان امتحان کنید »
Note

استفاده از ng-init خیلی متداول نیست. در آینده در قسمت مربوط به کنترلرها شما یک راه بهتر را برای مقداردهی اولیه به داده ها خواهید آموخت. 


رشته ها در انگولار

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

مثالی از انگولار

<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 نوشته شوند. 

عبارات انگولار، از شرطی ها و حلقه ها و استثناها پشتیبانی نمی کنند در حالی که عبارات جاوااسکریپت از موارد ذکر شده پشتیبانی می کنند. 

عبارات انگولار از فیلترها(filters) پشتیبانی می کنند اما عبارات جاوااسکریپت چنین کاری را انجام نمی دهند. 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی