دایرکتیو ها یا دستور ها در AngularJS

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 )  را مقدار دهی اولیه میکند.

مثال directive ها در AngularJs
<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  کار خواهند کرد.

مثال دایرکتیو در 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 را تکرار می کند.

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

مثال دایرکتیو در AngularJS
<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 کار می کنند فوق العاده است.
CRUD مخفف عبارت (Create Read Update Delete) است.
فقط تصور کنید که عناصر نمایش داده شده رکورد های یک دیتابیس باشند.

دستورالعمل 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

مثال دایرکتیو در AngularJS
≪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
  • صفات عناصر
  • کلاس ها
  • توضیحات

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

مثال دایرکتیو در AngularJS
<w3-test-directive></w3-test-directive>
مشاهده مثال

مثال دایرکتیو در AngularJS
<div w3-test-directive></div>
مشاهده مثال

مثال دایرکتیو در AngularJS
<div class="w3-test-directive"></div>
مشاهده مثال

مثال دایرکتیو در AngularJS
<!-- directive: w3-test-directive -->
مشاهده مثال

محدودیت ها

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

مثال دایرکتیو در AngularJS
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        restrict : "A",
        template : "<h1>Made by a directive!</h1>"
    };
});
مشاهده مثال

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

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

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

C برای کلاس ها

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

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

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز