در این جلسه با دایرکتیوها یا دستورالعمل های انگولار جی اس آشنا می شوید . انگولار جی اس این امکان را فراهم کرده تا امکانات HTML را به کمک دایرکتیو ها گسترش دهیم.
- AngularJS به شما اجازه می دهد که HTML را با ویژگی های جدید به نام Directives گسترش دهید.
- AngularJS دارای مجموعه ای از دستورات ساخته شده است که قابلیت برنامه های کاربردی شما را فراهم می کند.
- AngularJS همچنین به شما اجازه می دهد دستورات خود را تعریف کنید.
برای استفاده از دایرکتیوها در انگولار جی اس :
- دستورالعمل AngularJS ویژگیهای HTML را با پیشوند ng- پایه گذاری می کنند.
- دستور ng-app یک برنامه AngularJS را راه اندازی می کند.
- دستور ng-init مقدار داده های برنامه بنا می کند.
- دستورالعمل مدل ng مقدار کنترل های HTML (ورودی، انتخاب، متن منطقه) را به داده های برنامه متصل می کند.
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
دستور ng-app به AngularJS می گوید که عنصر <div> صاحب برنامه AngularJS است.
عبارت {{firstName}}، در مثال بالا، بیانگر اتصال داده AngularJS است. اتصال داده ها در AngularJS عبارات AngularJS را با داده های AngularJS متصل می کند. همچنین {{firstName}} به ng-model = “firstName” متصل شده است.
در مثال بعدی، دو فیلد متنی همراه با دو دایرکتیو 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>
</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>
AngularJS برای پایگاه داده CRUD (Create Read Update Clean) مناسب است.
فقط تصور کنید اگر این اشیاء از یک پایگاه داده ثبت شده باشند.
دایرکتیوهای انگولار جی اس
دستورالعمل Ng-app
دستور Ng-app عناصر ریشه یک برنامه AngularJS را تعریف می کند.
دستورالعمل ng-application بوت استرپ خودکار (به طور خودکار مقداردهی اولیه) برنامه را هنگامی که یک صفحه وب بارگذاری می شود.
دستورالعمل ng-init
دستورالعمل ng-init مقادیر اولیه برای یک برنامه AngularJS را تعریف می کند.
به طور معمول از ng-init استفاده نمی کنید بلکه از یک کنترل کننده یا ماژول استفاده می کنید.
مدل ng-model
دستورالعملng-model ارزش کنترل های HTML (ورودی، انتخاب، متن منطقه) را به داده های برنامه متصل می کند.
دستورالعملng-model همچنین می تواند:
- ارائه تاییدیه نوع داده های برنامه (شماره، ایمیل، مورد نیاز).
- وضعیت داده های برنامه را ارائه دهید (نامعتبر، کثیف، لمس شده، خطا).
- ارائه کلاس CSS برای عناصر HTML.
- عناصر HTML را به فرم HTML متصل کنید.
ایجاد دایرکتیو جدید
علاوه بر تمام دستورالعمل های داخلی AngularJS، شما می توانید دستورات خود را ایجاد کنید.
دستورالعمل های جدید با استفاده از عملکرد .directive ایجاد می شوند.
برای فراخوانی دستور جدید، یک عنصر HTML با همان نام برچسب به عنوان دستور جدید ایجاد کنید.
هنگام نامگذاری یک دستور، شما باید از نام نام شتر، 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>
شما می توانید یک دایرکتیو را با استفاده موارد زیر بیدار کنید:
- نام عنصر
- صفت
- کلاس
- توضیحات
مثالهای زیر همه نتیجه ی مشابهی تولید خواهند کرد:
نام عنصر:
<w3-test-directive></w3-test-directive>
صفت:
<div w3-test-directive></div>
کلاس:
<div class="w3-test-directive"></div>
توضیحات:
<!-- 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>"
};
});
مقادیر قابل استفاده برای restrict عبارتند از:
- E برای نام عنصر
- A برای مشخصه
- C برای کلاس
- M برای نظر
به طور پیش فرض مقدار EA است، به این معنی که هر دو عنصر نام و نام ویژگی می توانند از دستور استفاده کنند.