ورود به کارتابل مشتریان وب مهراز
عبارات در AngularJS
یادگیری AngularJSAngularJS با استفاده از عبارت ها داده ها را در خروجی نمایش میدهد.
عبارات در AngularJS
- عبارات در AngularJS می توانند در دبل براکت نوشته شوند به این صورت که {{ expression }} .
- عبارت در AngularJS می تواند در directive بصورت زیر نوشته شود ng-bind="experssion
عبارات در AngularJS بسیار شبیه عبارات در JavaScript می باشد که شامل لیترال ها ، اپراتور ها و متغیر هاست . به عنوان مثال {{ 5 + 5 }} یا {{ firstname +" " + lastname }}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>اگر شما ng-app را حذف کتید ، HTML بدون اینکه عبارات را حل کند ، دقیقا موارد درون عبارات را نمایش می دهد.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>شما می توانید از عبارات در هر کجا مه میخواهید استفاده کنید . AngularJS به سادگی نتایج عبارت را محاسبه خواهد کرد و در خروجی نمایش خواهد داد.
به عناون مثال : می توانید توسط AngularJS مقادیر مربوط به متغیر های CSS را تغییر دهید و مقدار دهی کنید.
در زیر میتوانید با تغییر نام رنگ در باکس مربوطه رنگ باکس را تغییر دهید.
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>اعداد در AngularJS
اعداد در 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 متداول نیست. در ادامه روش های بهتری برای مقداردهی به متغیر ها به شما ارئه خواهد شد.
رشته ها در AngularJS
رشته ها در 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
آبجکت ها در 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
آرایه ها در AngularJS شبیه آرایه ها در JavaScript می باشند.پ
<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
همانند عبارات JavaScript ، عبارات AngularJS می تواندد شامل لیترال ها ، اپراتور ها و متغیر ها باشند.
همانند عبارات JavaScript ، عبارات AngularJS می توانند درون کد های HTML نوشته شوند.
عبارات AngularJS شرط ها ، حلقه ها و استثنا ها را پشتیبانی نمی کنند ولی JavaScript همه این ها را پشتیبانی می کند.
شما می توانید درس های JavaScript را در آموزش های دوره ای JavaScript دنبال کنید.
نظر شما
>