تعليمات AngularJS

يُمكنك استخدام أنغولار جي لاستخدام ما يُدعى بـتعليماتلتمديد HTML باستخدام الخاصية الجديدة

أنغولار جي يحتوي على مجموعة من التعليمات الداخلية، التي تقدم لك ميزات لتطبيقك.

AngularJS يسمح أيضًا لك بتعريف تعليمات خاصة بك.

تعليمات AngularJS

تعليمات AngularJS هي خصائص HTML مدمجة، تحتوي على بادئة ng-.

ng-app تعليمات إعداد تطبيق AngularJS.

ng-init تعليمات إعداد بيانات التطبيق.

ng-model تقوم التعليمات بربط قيمة عنصر التحكم HTML (input, select, textarea) ببيانات التطبيق.

يرجى قراءة معلومات جميع التعليمات في دليل تعليمات 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 تعليمات ng-init تعرفالعنصر الجذر.

عند تحميل الصفحة،ng-app تعليماتالتحميل التلقائيتطبيق (تأهيل تلقائي).

تعليمات ng-init

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

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

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

تعليمات ng-model

ng-model تقوم التعليمات بربط قيمة عنصر التحكم HTML (input, select, textarea) ببيانات التطبيق.

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

  • توفير التحقق من صحة البيانات (رقم، بريد إلكتروني، إلزامي)
  • توفير حالة البيانات التطبيقية (غير صالح، قذر، لم يتم لمس، خطأ)
  • توفير صيغة CSS للعناصر HTML
  • ربط عنصر 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، مما يعني أن يمكن استدعاء اسم العنصر واسم الخاصية كتعليمات.