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

آانگولار جی به شما اجازه می‌دهد تا ازدستورپروپریتی جدیدی به نام

آانگولار جی ایک سلسله از داخلی دستورات دارد، جواز می‌دهد تا عملکردی را برای برنامه شما فراهم کند。

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

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

فرمان‌های AngularJS فرم‌های HTML گسترش‌یافته هستند که با پیشوند ng-.

ng-app فرمان‌ها برنامه AngularJS را بهینه‌سازی می‌کنند.

ng-init فرمان‌ها داده‌های برنامه را بهینه‌سازی می‌کنند.

ng-model تقييد قيمة عنصر التحكم HTML (إدخال، اختيار، نصوص) إلى بيانات التطبيق.

لطفاً در بخش مرجع فرمان‌های 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 نایاب است. شما در فصل مربوط به کنترل‌گرها یاد خواهید گرفت که چگونه داده‌ها را بهینه‌سازی کنید.

تکرار عناصر 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 تعريف تطبيق AngularJSالعنصر الجذر.

عند تحميل الصفحة،ng-app تعليماتإقلاع تلقائيالبرنامج. (التشغيل التلقائي)

تعليمات ng-init

ng-init تعريف تطبيق AngularJSالقيمة الافتراضية.

عادةً، لن تستخدم ng-init. ستعتمد على التحكم أو المكون.

ستتعرف على المزيد عن التحكم والمكونات فيما بعد.

تعليمات ng-model

ng-model تقييد قيمة عنصر التحكم HTML (إدخال، اختيار، نصوص) إلى بيانات التطبيق.

ng-model يمكن للتعليمات أيضًا:

  • توفير التحقق من صحة البيانات للبيانات (رقم، بريد إلكتروني، إلزامي)
  • توفير حالة البيانات للنموذج (غير صالح، قذر، لم يتم لمس، خطأ)
  • توفير فئة CSS لعنصر HTML.
  • ربط عنصر HTML بجافا سكريبت.

اقرأ المزيد عن ng-model معلومات التعليمات.

إنشاء تعليمات جديدة

إضافة إلى جميع التعليمات المدمجة في 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>ساخته شده با دستورالعمل!</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، این بدان معناست که نام‌های عناصر و نام‌های ویژگی‌ها نیز می‌توانند دستورالعمل‌ها را فراخوانی کنند.