AngularJS با استفاده از صدا زدن مشخصه هایی که Directives خوانده می شوند ،به شما امکان توسعه HTML را میدهند.

AngularJS با استفاده از Directive ها به  اپلیکیشن شما ، عملگرایی می بخشند.

AngularJS به شما امکان تعریف Directive مختص خودتان را می دهد.

Directive ها در AngularJS

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

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

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

دستورالعمل ng-model کنترل های موجود در html از جمله (textbox , textarea , select , input )  را مقدار دهی اولیه میکند.

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

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

</div> 

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

بایند کردن داده ها

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

عبارت {{firstName}} معادل استفاده از جمله مقابل است  ng-model="firstName" است.
در مثال بعدی دو فیلد متنی وجود دارند که که با استفاده از directive ای بنام ng-model  کار خواهند کرد.

<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> 

تکرار عناصر 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 برای ساختن آرایه ای از عناصر استفاده می شود.

<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> 

دستورالعمل ng-app

ng-app عنصر ریشه برنامه AngularJS را تعریف می کند.

با استفاده از ng-app زمانی که برنامه بارگذاری شد بصورت اتوماتیک مقداردهی می شود که اصطلاحا به آن auto-bootstrap  می گویند.

دستورالعمل ng-init

ng-init مقادیری را برای برنامه AngularJS تعریف می کند.

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

دستور العمل ng-model

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

دستورالعمل ng-model میتواند همچنین :

• داده های ورودی برنامه را اعتبار سنجی کند ( داده هایی مانند  ایمیل ، شماره موبایل و ... ).
• وضعیت داده های ورودی رات مشخص کند (invalid, dirty, touched, error) .
• کلاس های css را برای عناصر HTML تعریف کند .
• عناصر HTML را در فرم های HTML قرار دهد.

در درس بعدی بیشتر در رابطه با ng-model بیشتر خواهیم خواند.

ایجاد دستورالعمل جدید

علاوه بر دستوالعمل ها (دایرکتیو ها) که خود AngularJS ارائه می دهد ، شما می توانید دستوالعمل مختص به خودتان را بسازید.

دستور اعمل های جدید توسط .directive ساخته می شوند.

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

زمانی که دستوالعمل خود را نام گذاری  می کنید ، شما باید از قاعده نام گذاری Camel Case استفاده کنید. به عنوان مثال :  webmehrazTestDirective اما زمانی که آن را فراخوانی می کنید شما باید از جدا کننده - آن را فراخوانی کنید به این شکل : webmehraz-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>

شما می توانید دستوالعمل ها را فراخوانی کنید . از طریق:

• نام عناصر HTML
• صفات عناصر
• کلاس ها
• توضیحات

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

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

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

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

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

محدودیت ها

شما می توانید دستورالعمل های خود را محدود کنید به یک سری از متد ها.

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

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

E برای نام عناصر

A برای صفات عناصر

C برای کلاس ها

M برای کامنت ها یا توضیحات

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