آنگولار اجازه ی بسط زبان HTML با استفاده از صفات جدیدی به نام Directive(دستورات) را میدهد. در این فصل انواع دستورات آنگولار و نحوه ی استفاده از آنها آشنا خواهیم شد.


دستورات در AngularJS

آنگولار اجازه ی بسط HTML با استفاده از صفات جدیدی به نام Directive(دستورات) را میدهد. این کتابخانه همچنین دارای مجموعه ای از دستورات توکار است که قابلیت هایی را به اپلیکیشن شما اضافه میکند. به علاوه آنگولار اجازه میدهد که دستور سفارشی خود را تعریف کنید.

 

دستورات AngularJS صفاتی برای بسط پذیری هستند که با استفاده از پسوند -ng مشخص میشوند.

دستور ng-app یک اپلیکیشن AngularJS را مقدار دهی میکند.

دستور ng-init داده های اپلیکیشن را مقداردهی میکند.

دستور ng-model مقادیر کنترل های HTML را (input, select, textarea) به داده های اپلیکیشن منتقل میکند.
 

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

بنابراین دستور ng-app به آنگولار میگوید که عنصر <div> مالک اپلیکیشن AngularJS است.


انتقال داده

عبارت {{ firstName }} در نمونه مثال بالا ، یک عبارت انتقال داده در AngularJS است.

انتقال داده بین عبارت AngularJS و داده های AngularJS صورت میگیرد.

مقدار عبارت {{ firstName }} به وسیله ی دستور "ng-model="firstName تامین میشود.

در نمونه مثال بعدی مقدار دو فیلد متنی با استفاده از دستور ng-model و عبارات در AngularJS در هم ضرب میشوند :

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

نکته : استفاده از دستور ng-init زیاد رایج نیست. در فصولی که درباره ی کنترل ها می آموزید ، با روش بهتری برای مقداردهی متغیر ها آشنا میشوید.


 تکرار کردن عناصر HTML

دستور ng-repeat یک عنصر HTML را تکرار میکند :

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

دستور ng-repeat یک بار برای هر آیتمی در لیست ، یک کپی از عناصر HTML تولید میکند.

در نمونه مثال زیر دستور ng-repeat روی آرایه های از Object ها استفاده شده است :

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

نکته : AngularJS برای اعمال (CRUD(Create Read Update Delete در دیتابیس عالیست. فرض کنید این Object ها رکورد هایی از دیتابیس باشند.


دستور ng-app 

دستور ng-app عنصر ریشه ی یک اپلیکیشن AngularJS راتعریف میکند.

دستور ng-app موقعی که صفحه وب بارگذاری میشود، به صورت خودکار مقداردهی میشود.


دستور ng-init

دستور ng-init مقدار اولیه برای یک اپلیکیشن AngularJS را تعریف میکند. به صورت معمول  شما از ng-init استفاده نمی کنید. شما در عوض از یک ماژول و یا یک کنترل به جای آن استفاده می کنید. شما بعدا در مورد کنترولر ها و ماژول ها بیشتر خواهید آموخت.


دستور ng-model

دستور ng-model مقادیر کنترل های HTML را (input, select, textarea) به داده های اپلیکیشن منتقل میکند. بنابراین دستور ng-model میتواند :

  • نوع اعتبارسنجی را برای داده های اپلیکیشن فراهم آورد (number, email, required).
  • وضعیت های مختلفی را برای داده های اپلیکیشن فراهم آورد (invalid, dirty, touched, error).
  • کلاس های CSS را برای عناصر HTML فراهم آورد.
  • عناصر HTML را به عناصر فرم مرتبط کند.

در فصل بعدی در مورد ng-model بیشتر خواهیم آموخت.


ساخت یک دستورات (Directives) جدید

به علاوه ی همه ی دستورات توکار AngularJS ، شما میتوانید دستورات سفارشی خود را ایجاد کنید.

دستورات جدید با استفاده از تابع directive. ساخته میشوند.

برای فراخوانی یک دستور جدید، یک عنصر HTML با نام تگ یکسان با دستور ایجاد کنید.

در هنگام نامگذاری یک دستور، شما باید از قاعده ی نامگذاری camel-case استفاده کنید، برای مثال w3TestDirective ، اما هنگام فراخوانی آن ، شما باید از - برای جداکردن نام ها استفاده کنید ،  w3-test-directive :

<body ng-app="myApp">

<w3-test-directive></w3-test-directive>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        template : "<h1>Made by a directive!</h1>"
    };
});
</script>

</body>

میتوانید یک دستور را با استفاده از یکی از گزینه های زیر فراخوانی کنید :

  • Element name
  • Attribute
  • Class
  • Comment

نمونه مثال های زیر همگی نتیجه ی یکسانی دارند :

نام عنصر (Element name) :

<w3-test-directive></w3-test-directive>

 صفات (Attribute) :

<div w3-test-directive></div>

کلاس (Class) :

<div class="w3-test-directive"></div>

کامنت (Comment) :

<!-- directive: w3-test-directive -->

محدودیت ها

شما میتوانید دستور خود را محدود کنید که تنها با بعضی از روش ها فراخوانی شوند. در نمونه مثال زیر با افزودن  "restrict : "A  مشخص میکنیم که دستور تنها با استفاده از صفات میتواند فراخوانی شود :

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        restrict : "A",
        template : "<h1>Made by a directive!</h1>"
    };
});

مقادیر معتبر برای فراخوانی عبارت اند از :

  • E برای Element name
  • A برای Attribute
  • C برای Class
  • M برای Comment

به صورت پیشفرض مقدار محدودیت برابر با EA است، و این به این معناست که از دو روش میتوان برای فراخوانی استفاده کرد.