توجيهات AngularJS: ng-init وng-app وng-model وng-repeat

ما هو التوجيه في AngularJS؟

A التوجيه في AngularJS، يُعدّ الأمر `ng-model` إضافةً تُضفي وظائف جديدة على HTML. عند معالجة AngularJS لرمز HTML، يبحث أولًا عن التوجيهات في الصفحة، ثم يُحلل الصفحة وفقًا لذلك. مثال بسيط على توجيهات AngularJS، والذي رأيناه في فصول سابقة، هو التوجيه `ng-model`. يُستخدم هذا التوجيه لربط نموذج البيانات بالعرض.

ملاحظة: يمكنك استخدام كود AngularJS أساسي في صفحة HTML باستخدام توجيهات ng-init و ng-repeat و ng-model دون الحاجة إلى وحدات تحكم. يوجد منطق هذه التوجيهات في ملف AngularJS الذي يوفره AngularJS. Googleتُعتبر وحدات التحكم (Controllers) من المستوى التالي في بنى برمجة AngularJS التي تسمح بوجود منطق الأعمال، ولكن كما ذكرنا، ليس من الضروري أن يحتوي التطبيق على وحدة تحكم ليكون تطبيق AngularJS.

لكن كيف ينتهي الأمر بالمتصفح بتشغيل واحد؟

كيفية عمل توجيهات AngularJS في HTML

كما أوضحنا في المقدمة، فإن توجيه AngularJS هو طريقة لتوسيع وظائف HTMLعند تحميل الصفحة، يقوم مترجم AngularJS بفحص DOM، ومطابقة كل عنصر مع التوجيهات المسجلة، وإرفاق السلوك الذي يجده.

AngularJS تأتي هذه التطبيقات مزودةً بعشرات التوجيهات المدمجة، بالإضافة إلى أي توجيهات تقوم بتسجيلها بنفسك. التوجيهات الأربعة الموضحة أدناه مع أمثلة عملية، وهي ng-app و ng-init و ng-model و ng-repeat، هي التي يتعرف عليها المبتدئون أولاً. قبل هذه الأمثلة، لاحظ الطرق الأربع لكتابة التوجيه.

ما هي أنواع توجيهات AngularJS الأربعة؟

لا تُعتبر التوجيهات دائمًا سمات. يستطيع مُصرّف AngularJS مطابقة التوجيهات من خلال اسم العنصر أو السمة أو اسم الفئة أو التعليق، ويُحدد كل توجيه الأشكال التي يقبلها من خلال خصائصه. restrict الخاصية. الوضع الافتراضي هو EAلذا، فإنّ صيغة العنصر وصيغة السمة تعملان ما لم تُحدد خلاف ذلك. تُعدّ القيمة هي الأهم عند كتابة التوجيه الخاص بك، لأنّ المُصرّف يتجاهل أيّ شكل تستثنيه قيمة التقييد.

؟؟؟؟ تلميح: يُفضّل استخدام صيغة العناصر والخصائص. المرجع الرسمي لتوجيهات AngularJS يتعامل مع نماذج الفئات والتعليقات كخيارات قديمة. جميع الأمثلة أدناه تستخدم صيغة السمات.

ng-التطبيق في AngularJS

يُستخدم هذا لتهيئة تطبيق AngularJS. عند وجود هذا التوجيه في صفحة HTML، فإنه يُخبر AngularJS بأن هذه الصفحة هي تطبيق AngularJS.

مثال على تطبيق ng-app

يوضح المثال أدناه كيفية تحويل تطبيق HTML عادي إلى تطبيق AngularJS.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

⚠️ : تحذير يحتفظ الإعلان بالأصل chrset="UTF 8"تمامًا كما نُشر. السمة الصحيحة هي charset="UTF-8".

Code التفسير:

1. تمت إضافة توجيه "ng-app" إلى عنصر div للإشارة إلى أن هذا التطبيق مبني باستخدام AngularJS. تجدر الإشارة إلى أن توجيه "ng-app" يمكن تطبيقه على أي عنصر، لذا يمكن وضعه أيضًا في عنصر body.
2. بما أننا عرّفنا هذا التطبيق كتطبيق AngularJS، يمكننا الآن الاستفادة من وظائف AngularJS. في حالتنا، نستخدم التعابير لدمج سلسلتين نصيتين ببساطة.

إذا تم تنفيذ الكود بنجاح، فستظهر المخرجات أدناه.

الإخراج:

يُظهر الناتج بوضوح مخرجات التعبير، وهو ما لم يكن ليتحقق لولا تعريفنا للتطبيق كتطبيق AngularJS. ويُقدّم التوجيه التالي بياناته.

ng-init في AngularJS

يُستخدم هذا لتهيئة بيانات التطبيق. قد تحتاج أحيانًا إلى بعض البيانات المحلية لتطبيقك، ويمكن القيام بذلك باستخدام توجيه ng-init.

مثال على ng-init

في هذا المثال، سنقوم بإنشاء متغير يسمى "TutorialName" باستخدام التوجيه ng-init وعرض قيمة هذا المتغير على الصفحة.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code التفسير:

1. تتم إضافة التوجيه ng-init إلى علامة div الخاصة بنا لتحديد متغير محلي يسمى "TutorialName" والقيمة المعطاة له هي "AngularJS".
2. نحن نستخدم التعبيرات في AngularJS لعرض مخرجات اسم المتغير "TutorialName" الذي تم تعريفه في توجيه ng-init الخاص بنا.

إذا تم تنفيذ الكود بنجاح، فستظهر المخرجات أدناه.

الإخراج:

في الإخراج،

• تظهر النتيجة بوضوح مخرجات التعبير الذي يحتوي على السلسلة "AngularJS". وذلك نتيجة تعيين السلسلة "AngularJS" للمتغير "TutorialName" في قسم ng-init.

يقوم التوجيه التالي بإرسال البيانات من الشاشة إلى النموذج.

ng-model في AngularJS

وأخيرًا، لدينا توجيه ng-model، والذي يستخدم لربط قيمة عنصر تحكم HTML ببيانات التطبيق.

مثال على نموذج نانوغرام

في هذا المثال،

• سنقوم بإنشاء متغيرين يسمى "الكمية" و"السعر". سيتم ربط هذه المتغيرات بعنصري تحكم في إدخال النص.
• سنقوم بعد ذلك بعرض المبلغ الإجمالي بناءً على ضرب قيمتي السعر والكمية.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

Code التفسير:

1. تتم إضافة التوجيه ng-init إلى علامة div الخاصة بنا لتحديد متغيرين محليين؛ أحدهما يسمى "الكمية" والآخر "السعر".
2. الآن نحن نستخدم توجيه ng-model لربط مربعات النص "الأشخاص" و"سعر التسجيل" بمتغيراتنا المحلية "الكمية" و"السعر" على التوالي.
3. وأخيرًا، نعرض الإجمالي من خلال تعبير، وهو حاصل ضرب متغيري الكمية والسعر.

إذا تم تنفيذ الكود بنجاح، فستظهر المخرجات أدناه.

الإخراج:

• يُظهر الإخراج بوضوح مضاعفة قيم الأشخاص وسعر التسجيل.

الآن، إذا قمت بتغيير قيمة "الأشخاص" و"سعر التسجيل" في مربعات النص، فسيتغير الإجمالي تلقائيًا.

• يُظهر الناتج أعلاه قوة ربط البيانات في AngularJS، والتي تتحقق باستخدام توجيه نموذج نانوغرام.

أما الأخير من بين الأربعة فيتعامل مع العديد من القيم في وقت واحد.

نانوغرام تكرار في AngularJS

يستخدم هذا لتكرار عنصر HTML. يوضح المثال أدناه كيفية استخدام نانوغرام تكرار التوجيه.

مثال على تكرار نانوغرام

في هذا المثال،

• سيكون لدينا مجموعة من أسماء الفصول في متغير صفيف و
• ثم استخدم التوجيه ng-repeat لعرض كل عنصر من عناصر المصفوفة كعنصر قائمة

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code التفسير:

1. تتم إضافة التوجيه ng-init إلى علامة div الخاصة بنا لتعريف متغير يسمى "الفصول" وهو متغير مصفوفة يحتوي على 3 سلاسل.
2. يتم استخدام عنصر التكرار ng من خلال الإعلان عن متغير مضمن يسمى "الأسماء" وتصفح كل عنصر في مصفوفة الفصول.
3. وأخيرًا، نعرض قيمة المتغير المضمّن المحلي 'names'.

إذا تم تنفيذ الكود بنجاح، فستظهر المخرجات أدناه.

الإخراج:

• يُظهر الإخراج أعلاه فقط أن التوجيه ng-repeat أخذ كل قيمة في المصفوفة المسماة "الفصول" وأنشأ عناصر قائمة HTML لكل عنصر في المصفوفة.

تشمل هذه العناصر الأربعة بدء التشغيل، والبيانات، والربط، والتكرار. توضح القائمة أدناه ما يلي.

توجيهات أخرى شائعة الاستخدام مضمنة في AngularJS

التوجيهات الأربعة المذكورة أعلاه هي مجموعة البداية، وليست المكتبة بأكملها. كل إدخال أدناه هو سمة تضعها مباشرةً على العنصر الذي تتحكم فيه.

• ng-bind: يكتب قيمة نطاق في نص عنصر دون إظهار الأقواس الخام لفترة وجيزة عند التحميل.
• ng-if: يزيل العنصر من DOM عندما يكون تعبيره خاطئًا، ويعيد بنائه عندما يكون صحيحًا.
• ng-show و ng-hide: Togglيمكنك التحكم في الرؤية باستخدام CSS. يبقى العنصر في DOM، لذا فإن عمليات التبديل المتكررة أقل تكلفة.
• ng-class: يضيف أو يزيل فئات CSS من تعبير، مما يسمح للتصميم باتباع النموذج.
• ng-click: يقوم بتشغيل تعبير أو دالة نطاق عندما ينقر المستخدم على العنصر.
• ng-controller: يقوم هذا الكود بربط وحدة تحكم بكتلة من التعليمات البرمجية بمجرد أن يتجاوز حجم الصفحة حجم ng-init.
• ng-disabled و ng-readonly: قم بتعيين سمة النموذج المطابق كلما كان تعبيرهم صحيحًا.

تجيب الأسئلة الشائعة أدناه على الأسئلة التي تلي هذه القائمة في أغلب الأحيان.

الأسئلة الشائعة