مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. تاکنون با ساختار کلی AngularJS و چگونگی استفاده از این فریم ورک در کد Html آشنا شدید. همچنین در بخش قبلی به Expressions یا اصطلاحات در AngularJS ، اشاره ای داشتیم. در این بخش قصد داریم که جزئیات بیشتری از این مبحث را ، ارائه دهیم.
همانطور که در بخش قبلی نیز اشاره کردیم. می دانیم که AngularJS داده ها را با استفاده از Expressions یا عبارات به کد HTML ، متصل می کند.
Expressions یا اصطلاحات در AngularJS
عبارات AngularJS را می توان در داخل دو براکت قرار بگیرد: {{ expression }} .
عبارات AngularJS نیز می تواند. در یک دستور نوشته شود: ng-bind="expression".
AngularJS عبارات را حل می کند. و نتیجه را دقیقا همان جایی که بیان شده است، باز می گرداند.
عبارات AngularJS بسیار شبیه عبارتهای جاوااسکریپت هستند: آنها میتوانند حاوی حرف، اپراتور و متغیر باشند.
مثال : {{ ۵ + ۵ }} یا {{ firstName + ” ” + lastName }}
مثال :
| <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html> |
اگر دستور ng-app را حذف کنید، آنگاه html آن را بدون حل کردن expression نمایش می دهد:
مثال :
| <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html> |
شما می توانید expression را هر کجا که می خواهید بنویسید، AngularJS به سادگی عبارت را حل کرده و نتیجه را برمی گرداند.
مثال: اجازه دهید AngularJS مقدار خواص CSS را تغییر دهد.
تغییر دادن رنگ جعبه ورودی در زیر با تغییر مقدار آن:
مثال :
| <div ng-app="" ng-init="myCol='lightblue'"> <input style="background-color:{{myCol}}" ng-model="myCol"> </div> |
اعداد در AngularJS
اعداد در 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> |
رشته ها در AngularJS
رشته های در 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> |
objects یا اشیا در AngularJS
اشیا در 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
آریه ها در AngularJS مانند آرایه ها در جاوا اسکریپت هستند:
مثال :
| <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third result is {{ points[2] }}</p> </div> |
استفاده از دستور ng-bind برای آرایه ها در AngularJS:
مثال :
| <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third result is <span ng-bind="points[2]"></span></p> </div> |
کلام آخر
در این بخش، ما شما را با ساختار expression یا عبارات در AngularJS و نحوه ی استفاده از انواع مقادیر را، آشنا کردیم. امیدواریم که از مطالب آموزش فوق، به اندازه کافی استفاده کرده باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
