در این آموزش به نحوه کاربرد دستورالعملها در آنگولار خواهیم پرداخت و یک دستورالعمل اختصاصی ایجاد خواهیم کرد.
دستورالعمل ها در آنگولار
آنگولار به شما اجازه توسعه HTML را با کمک صفات جدیدی به نام دستورالعمل میدهد.
آنگولارجی یک سری دستورالعمل از پیش ساخته شده دارد. که عملیاتی را در نرم افزار شما انجام میدهند.
آنگولارجی اس به شما اجازه ایجاد دستور العمل های اختصاصی را نیز میدهد.
دستورالعمل های آنگولارجی اس
دستورالعمل های آنکولارجی اس امکان توسعه المان های HTML را با صفت های، با پسوند ng- میدهد.
دستور العمل ng-app اپلیکشن آنگولار را راه اندازی میکند. در برخی منابع این عملیات به نام مقدار دهی اولیه معرفی میشود.
دستور العمل ng-ini داده های نرم افزار را تعریف می کند.
دستور العمل ng-model داده های نرم افزار را با کنترل های Html مانند (input, select, textarea) ترکیب می کند.
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
مشاهده نتیجه
دستور العمل ng-app به آنگولارجی اس اعلام میکند، که المان <div> اپلیکیشن آنگولار را اجرا می کند.
ارتباط داده ها
عبارت {{ firstName }} در مثال بالا عبارت ایجاد کننده اتصال در آنگولارجی اس است.
اتصال دهنده در آنگولارجی اس عبارت آنگولار را با داده های آنگولار مرتبط می کند.
{{ 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>
مشاهده نتیجه
استفاده از دستورالعمل ng-init رایج نیست، در ادامه دستورالعمل جایگزینی برای این دستور العمل معرفی می کنیم.
تکرار یک تگ HTML
برای فراخوانی داده ها در صفحه وب نرم افزار ها باید قادر به ایجاد تکرار در دستورات باشند، تا تمام داده ها را به صفحه وب وارد کنند، برای اینکار آنگولار از دستور العمل ng-repeat استفاده می کند:
<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 تگ شروع کننده اپلیکیشن آنگولار را معرفی میکند.
دستورالعمل ng-app بصورت اتوماتیک در هنگام بارگزاری صفحه بارگذاری میشود.
دستور العمل ng-init
دستورالعمل ng-init مقدار اولیه را برای نرم افزار آنگولارجی اس تعریف میکند.
در حالت عادی شما از دستورالعمل ng-init استفاده نمی کنید. شما بجای آن از ماژول ها یا کنترلرها استفاده می کنید. در باره ماژولها و کنترلرهای آنگولار در درسهای بعد توضیحات مفصل تری خواهید دید.
دستورالعمل ng-model مقادیر کنترلرهای HTML (input, select, textarea) را با داده های نرم افزار ترکیب می کند.
دستورالعمل ng-model میتواند کارهای زیر را نیز انجام دهد:
- برای داده های نرم افزار مقدار های معتبر را تعریف کند. (number, email, required)
- وضعیت داده های نرم افزار را مشخص می کند((invalid, dirty, touched, error.
- کلاس های CSS را برای المان HTML ایجاد می کند.
- محتویات تگهای HTML را با فرم های HTML متصل می کند.
در درس بعد درباره دستورالعمل ng-model را بطور کامل توضیح خواهیم داد.
ایجاد یک دستورالعمل جدید
برای ایجاد یک دستورالعمل جدید باید از عملگر .directive استفاده کنیم.
برای ایجاد یک دستورالعمل باید یک تگ HTML با نام همان دستورالعمل ایجاد کنید.
هنگام نامگذاری یک دستورالعمل باید از قانون Camel Case برای بزرگی کوچکی حروف استفاده کنید . در اسکریپت ما نام را بدون فاصله و در تگ با علامت – بین حروف ایجاد خواهیم کرد. در مثال زیر ما دستورالعمل 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>"
};
});
مشاهده نتیجه
مقادیر معتبر برای محدود کردن دستور العمل ها عبارتند از:
- E برای نام عنصر
- A برای صفت
- C برای کلاس
- M برای کامنت
در حالت پیشفرض محدویت بصورت EA تعریف میشود .که دستورالعمل را به نام و صفت عنصر محدود می کند.
در صورت تمایل جهت مشاوره رايگان ، گرفتن قیمت طراحی سایت ، اطلاعات بيشتر و سفارش با ما تماس بگيريد.