دستورالعمل‌های AngularJS

AngularJS به شما اجازه می‌دهد از یک نام‌گذاری به نام “دستورالعملنوپroperty به HTML اضافه می‌کند.

AngularJS دارای مجموعه‌ای از دستورالعمل‌های داخلی است که می‌تواند عملکردی را برای برنامه شما فراهم کند.

AngularJS همچنین به شما اجازه می‌دهد که دستورالعمل‌های خود را تعریف کنید.

دستورالعمل‌های AngularJS

دستورالعمل‌های AngularJS属性‌های HTML توسعه‌یافته‌ای هستند که دارای پیشوند ng-.

ng-app دستور initialize برنامه AngularJS را می‌کند.

ng-init دستور داده‌بندی برنامه را initialize می‌کند.

ng-model دستورالعمل‌ها ارزش HTML کنترل‌ها (input, select, textarea) را به داده‌های برنامه ببندند.

لطفاً به منابع دستورالعمل‌های AngularJS ما مراجعه کنید تا اطلاعات مربوط به همه دستورالعمل‌های AngularJS را بخوانید.

مثال

<div ng-app="" ng-init="firstName='Bill'">
<p>نام: <input type="text" ng-model="firstName"></p>
<p>شما نوشتید: {{ firstName }}</p>
</div>

آزمایش کنید

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">
تعداد: <input type="number" ng-model="quantity">
هزینه‌ها:    <input type="number" ng-model="price">
مجموع در دلار: {{ quantity * price }}
</div>

آزمایش کنید

استفاده از ng-init نادر است. شما در فصل مربوط به کنترل‌کننده‌ها خواهید آموخت که چگونه داده‌ها را initialize کنید.

تکرار عنصر HTML

ng-repeat دستور تکرار عنصر HTML:

مثال

<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>

آزمایش کنید

AngularJS برای برنامه‌های CRUD (ایجاد، خواندن، به‌روزرسانی، حذف) پایگاه داده بسیار مناسب است.

تصور کنید اگر این اشیاء از یک رکورد پایگاه داده باشند.

دستورالعمل ng-app

ng-app دستورالعمل ng-init داده‌های برنامه AngularJS راعنصر ریشه.

هنگام بارگذاری وب‌سایتng-app دستورالعملآوتوماتیک بهینه‌سازیبرنامه را (آوتوماتیک بهینه‌سازی) initializes.

دستورالعمل ng-init

ng-init دستورالعمل ng-init داده‌های برنامه AngularJS رامقدار اولیه.

معمولاً از ng-init استفاده نمی‌کنید. شما از کنترلر یا ماژول استفاده خواهید کرد.

در آینده اطلاعات بیشتری درباره کنترلرها و ماژول‌ها خواهید آموخت.

دستورالعمل ng-model

ng-model دستورالعمل‌ها ارزش HTML کنترل‌ها (input, select, textarea) را به داده‌های برنامه ببندند.

ng-model دستورالعمل‌ها همچنین می‌توانند:

  • بررسی اعتبار نوع داده‌های برنامه را فراهم می‌کند (عدد، ایمیل، اجباری)
  • وضعیت داده‌های برنامه را فراهم می‌کند (غیر معتبر، کثیف، لمس شده، خطا)
  • CSS کلاس برای عناصر HTML فراهم می‌کند
  • بستن عنصر HTML به فرم HTML

در فصل بعد بیشتر درباره ng-model اطلاعات دستورالعمل.

ایجاد دستورالعمل‌های جدید

علاوه بر تمام دستورالعمل‌های داخلی AngularJS، می‌توانید دستورالعمل‌های خود را ایجاد کنید.

دستورالعمل‌های جدید از طریق استفاده از .directive توسط تابع ایجاد شده است.

برای فراخوانی دستورالعمل جدید، یک عنصر HTML با نام برچسب مشابه دستورالعمل جدید ایجاد کنید.

هنگام نام‌گذاری دستورالعمل‌ها، باید از نام‌گذاری camelCase استفاده کنید،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>ساخته شده توسط یک دستورالعمل!</h1>"
  });
});
</script>
</body>

آزمایش کنید

می‌توانید از روش‌های زیر برای فراخوانی دستورالعمل استفاده کنید:

  • نام عنصر
  • ویژگی
  • طبقه
  • نکته

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

نام عنصر

<w3-test-directive></w3-test-directive>

آزمایش کنید

ویژگی

<div w3-test-directive></div>

آزمایش کنید

طبقه

<div class="w3-test-directive"></div>

آزمایش کنید

نکته

<!-- directive: w3-test-directive -->

آزمایش کنید

محدودیت

شما می‌توانید دستورالعمل خود را به گونه‌ای محدود کنید که فقط از طریق روش‌های خاصی فراخوانی شود.

مثال

با اضافه کردن یک مقدار "A" در restrict ویژگی، این دستورالعمل فقط می‌تواند از طریق ویژگی فراخوانی شود:

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

آزمایش کنید

مقدار مجاز برای restrict

  • E نشان‌دهنده نام عنصر است
  • A نشان‌دهنده ویژگی است
  • C نشان‌دهنده کلاس است
  • M نشان‌دهنده کامنت است

به صورت پیش‌فرض، این مقدار EAاین بدان معناست که نام‌های عناصر و نام‌های ویژگی‌ها می‌توانند دستورالعمل‌ها را فراخوانی کنند.