اگر مطالعه ای اجمالی درباره مزیتها و قدرت‌های فریم ورک Angular داشته باشید یکی از مواردی که بسیار جلب توجه میکند مبحث Directiveها است. به کمک Directiveها در Angular می‌توانید کدهای HTML خود را توسعه دهید. این توسعه علاوه بر تعریف تگ‌های جدید، شامل توسعه کلاس‌ها و همچنین ویژگی‌های تگ‌های HTML نیز خواهد بود. کدهای HTML شما بسیار خواناتر و از طرفی با قابلیت استفاده مجدد می‌شود. البته این پست فقط شروع به کار در این مقوله است زیرا مبحث Directiveها بسیار گسترده‌تر از آن است که بتوان مطالب آن را در یک مقاله گنجاند.
برای شروع یک فایل جاوا اسکریپ ایجاد کرده و در ابتدای آن یک ماژول تعریف کنید:var app = angular.module('myApp', []); app.directive('angry', function () {
return {
restrict: 'E',
template: '<div style="color:red"> I am angry!</div>'
}
})
تابع سازنده Directive مورد نظر که یک آبجکت را برگشت می‌دهد شامل خواص زیر می‌باشد:
restrict: که چهار مقدار E و A و C و M را می‌پذیرد که به EACM نیز معروف هستند.
E: زمانی که قصد داشته باشیم یک المان جدید بسازیم از E به معنای element در restrict استفاده می‌کنیم(<my-directive></my-directive> )؛
A: زمانی که قصد داشته باشیم Directive مورد نظر به عنوان Attribute در تگ‌ها استفاده شود از A به معنای Attribute در restrict استفاده می‌شود(<div my-directive="exp"></div> )؛
C: از C نیز برای تعریف Directive به عنوان مقادیر ویژگی کلاس استفاده می‌کنیم(<div class="my-directive: exp "></div> )؛
M: حالت M نیز برای استفاده Directive در کامنت‌ها است(<!-- directive: my-directive exp --> ).
در ادامه یک Directive دیگر به نام happy می‌سازیم:
restrict: که چهار مقدار E و A و C و M را می‌پذیرد که به EACM نیز معروف هستند.
E: زمانی که قصد داشته باشیم یک المان جدید بسازیم از E به معنای element در restrict استفاده می‌کنیم(<my-directive></my-directive> )؛
A: زمانی که قصد داشته باشیم Directive مورد نظر به عنوان Attribute در تگ‌ها استفاده شود از A به معنای Attribute در restrict استفاده می‌شود(<div my-directive="exp"></div> )؛
C: از C نیز برای تعریف Directive به عنوان مقادیر ویژگی کلاس استفاده می‌کنیم(<div class="my-directive: exp "></div> )؛
M: حالت M نیز برای استفاده Directive در کامنت‌ها است(<!-- directive: my-directive exp --> ).
در ادامه یک Directive دیگر به نام happy می‌سازیم:
app.directive('happy', function () {
return {
restrict: 'A',
template: '<div style="color:blue"> I am happy!</div>'
};
}) <script type="text/javascript" src="~/scripts/Modules/module1.js"></script>
<div ng-app="myApp">
<angry></angry>
<div happy></div>
</div> 
ادامه دارد...
