آموزش کار با اعلان Directive در AngularJS
چهارچوب کاری AngularJS این امکان را فراهم کرده تا زبان HTML را با خواص جدید (attributes) به نام Directives توسعه دهید.
AngularJS دارای مجموعه ای از Directive های پیش تعریف شده است که کارآیی و امکانات بیشتری را به برنامه شما می دهند.
در زبان AngularJS می توانید directive های مورد نظر و خاص خود را تعریف نموده و استفاده کنید.
معرفی اعلان ها یا AngularJS Directives
AngularJS Directives خواص HTML attributes را با خاصیت های دارد پیشوند ng-، گسترش داده است.
برای مثال، اعلان ng-app یک برنامه AngularJS Application را ایجاد و مقداردهی اولیه می کند.
اعلان ng-init، مقادیر اولیه را برای متغیرها و داده های برنامه تعین می کند.
اعلان ng-model مقدار (value) کنترل های HTML مثل (textarea, select,input) را به متغیرها و داده های برنامه AngularJS متصل می کند.
برای دریافت اطلاعات کامل راجع به اعلان ها (AngularJS Directives) به بخش مرجع اعلان ها در AngularJS بروید.
مثال عملی : در کد مثال عملی زیر، یک متغیر به نام firstName با مقدار اولیه “John” تعریف کرده ایم، که تگ دوم < p > مقدار آن را نمایش می دهد. همچنین با اتصال کنترل 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 application است.
آموزش اتصال اطلاعات (Data Binding) در AngularJS
عبارت {{firstName}} در مثال فوق، یک عبارت اتصال اطلاعات (data binding expression) در AngularJS است.
اتصال اطلاعات در AngularJS، عبارت های AngularJS expression را به اطلاعات و داده های AngularJS data، متصل می کند.
در کد مثال فوق، عبارت {{firstName}} به اعلان ng-model=”firstName” متصل شده است.
مثال عملی : در کد مثال عملی زیر، دو فیلد ورودی (text field) توسط دو اعلان ng-model directive به هم متصل شده و خروجی نهایی را در صفحه تولید می کنند:
| کد مثال عملی |
| کد |
<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، چندان رایج نیست. در بخش های بعدی به آموزش روش بهتر مقداردهی data توسط Contorller ها خواهیم پرداخت.
آموزش تکرار المنت های HTML در AngularJS
اعلان ng-repeat directive، یک المنت HTML را به مقدار مورد نظر در صفحه تکرار می کند.
مثال عملی : در کد مثال زیر، یک متغیر آرایه ای با 3 عضو را در اعلان ng-repeat تکرار کرده ایم. سپس توسط اعلان ng-repeat، آن را به تعداد اعضایش در صفحه تکرار کرده و نمایش داده ایم :
| کد مثال عملی |
| کد |
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
|
| خروجی |
|
در کد مثال فوق، اعلان ng-repeat directive، المنت های HTML را به ازای هر یک از آیتم های موجود در مجموعه، یک بار تولید و مقداردهی می کند.
مثال عملی2 : اعلان ng-repeat را بر روی آرایه ای از اشیا، استفاده کرد. در کد مثال عملی زیر، یک آرایه شی گرا (array of object) به نام names را تعریف و مقداردهی کرده ایم. سپس در هر یک از آیتم های لیست، خاصیت name و Country هر شی عضو آرایه را به صورت مجزا، نشان داده ایم :
| کد مثال عملی |
| کد |
<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)، به روز رسانی (Upload) و حذف کردن (Delete)، بسیار مناسب و قابل انعطاف است. فقط فرض کنید که در کد مثال عملی فوق، به جای آرایه ای از اشیا، از رکوردهای جدول پایگاه داده استفاده می کردیم .
آموزش کار با اعلان ng-app در AngularJS
اعلان ng-app directive، المنت اصلی (root element) یک برنامه AngularJS Application را تعیین می کند.
اعلان ng-app، به محض لود صفحه وب، برنامه را مقداردهی اولیه یا به اصطلاح auto-bootstrap می کند.
آموزش کار با اعلان ng-init در AngularJS
اعلان ng-init، مقدار اولیه متغیرها (initial values) را در یک برنامه AngularJS تعیین می کند.
به طور معمول از اعلان ng-init استفاده نشده و به جای آن از یک کنترلر (Controller) یا ماژول (madule) برای این کار استفاده می شود.
در بخش های بعدی به طور کامل به آموزش نحوه کار با کنترلر و ماژول ها در AngularJS خواهیم پرداخت.
آموزش کار با اعلان ng-module در AngularJS
اعلان ng-module directive، مقدار کنترل های HTML مثل کادر متن (input)، کادرهای انتخابی (select) و کادر متن های بزرگ (textarea) را به اطلاعات برنامه متصل می کند.
همچنین اعلان ng-module می تواند کارهای زیر را انجام دهد :
- می تواند عملیات اعتبارسنجی نوع داده ورودی (type validation) را برای اطلاعات برنامه مثل عدد (number)، ایمیل و یا ضروری بودن ورود داده (required) را انجام دهد.
- می تواند وضعیت داده های برنامه (status) را مثل نامعتبر بودن (invalid) ، خراب (dirty)، خطا (error) و ... را فراهم کند.
- می تواند کلاس CSS را برای المنت های HTML تعیین کند.
- می تواند مقادیر کنترل و المنت های HTML را به اجزای فرم های HTML متصل کند.
درباره اعلان ng-module، در درس بعدی به طور کامل صحبت خواهیم کرد.
آموزش تولید اعلان های جدید در AngularJS
علاوه بر کلیه اعلان پیش ساخته در AngularJS، می توانید اعلان یا directive مورد نظر خودتان را نیز ایجاد نمایید.
اعلان های جدید توسط تابع directive تولید می شوند.
برای فعال سازی اعلان جدید، بایستی یک المنت HTML به صورت یک تگ هم نام با نام directive، در صفحه ایجاد کنید.
در هنگام نام گذاری یک اعلان، بایستی از یک نام به هم چسبیده و بدون کاراکتر اضافی، مانند W3TestDirective استفاده نمایید، اما در هنگام فراخوانی و اجرا، بایستی از یک نام جدا شده مثل W3-Test-Directive استفاده کنید.
مثال عملی : در کد مثال عملی زیر، یک اعلان جدید به نام W3TestDirective ایجاد کرده ایم و توسط آن، یک تگ
را به صورت خروجی در محل اعلان نمایش داده ایم :
| کد مثال عملی |
| کد |
<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>
|
| خروجی |
|
می توانید یک اعلان (directive) را به وسیله المنت های زیر، فراخوانی کنید :
- نام المنت (Element Name)
- خاصیت (Attribute)
- کلاس (Class)
- توضیح (Comment)
مثال 1 : کد مثال عملی زیر، با استفاده از نام المنت، خروجی همانند مثال قبلی تولید می کند :
| کد مثال عملی |
| کد |
< w3-test-directive></w3-test-directive>
|
| خروجی |
|
مثال 2 : در کد مثال عملی زیر، اعلان ایجاد شده توسط یک خاصیت تگ
فراخوانی شده و خروجی همانند کد مثال قبل دارد :
| کد مثال عملی |
| کد |
<div w3-test-directive></div>
|
| خروجی |
|
مثال 3 : در کد مثال عملی زیر، اعلان ایجاد شده را توسط خاصیت Class تگ
فراخوانی کرده و خروجی همانند مثال قبل تولید شده است :
| کد مثال عملی |
| کد |
<div class="w3-test-directive"></div>
|
| خروجی |
|
مثال 4 : در کد مثال زیر، نام اعلان ایجاد شده در یک تگ توضیح (Comment) قرار داده و باعث تولید خروجی مورد نظر در محل تگ توضیح شده ایم. ای مثال نیز، خروجی مانند مثال های قبل دارد :
| کد مثال عملی |
| کد |
<!-- directive: w3-test-directive -->
|
| خروجی |
|
آموزش اعمال محدودیت برای فراخوانی در AngularJS
می توانید شرایط و محدودیت هایی تعیین کرده تا اعلان ایجاد شده، فقط توسط برخی متدها فراخوانی شوند.
مثال عملی : با اضافه کردن خاصیت restrict در هنگام تعریف directive، می توانید محدودیت های مورد نظر جهت فراخوانی اعلان را تعیین کنید.
برای مثال در کد مثال زیر، با تعیین حرف “A” جهت خاصیت restric، اعلام کرده ایم این اعلان فقط توسط روش attribute، امگان فراخوانی داشته باشد.
| کد مثال عملی |
| کد |
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "A",
template : "< h1 > Made by a directive!</h1>"
};
});
|
| خروجی |
|
موارد ممکن جهت اعمال محدودیت فراخوانی اعلان ها به صورت زیر است :
E جهت نام المنت
A جهت خاصیت Attribute
C جهت کلاس Class
M برای توضیح یا Comment
برای مثال، اگر مقدار خاصیت restrict را برابر “EA” قرار دهیم، بدین معناست که اعلان فقط توسط روش های المنت و خاصیت Attribute، امکان فراخوانی دارد.