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

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

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

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

كيفية إنشاء التوجيهات في AngularJS

كما حددنا في المقدمة، فإن توجيهات AngularJS هي وسيلة لتوسيع وظائف HTML.

هناك 4 توجيهات محددة في AngularJS.

فيما يلي قائمة بتوجيهات AngularJS بالإضافة إلى الأمثلة المقدمة لشرح كل منها.

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

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

مثال على تطبيق np

يوضح المثال أدناه كيفية استخدام التوجيه ng-app. في هذا المثال، سنوضح ببساطة كيفية تحويل تطبيق HTML عادي إلى تطبيق angularJS.

ng-التطبيق في 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>

شرح الكود:

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

إذا تم تنفيذ التعليمات البرمجية بنجاح، فإن following سيتم عرض الإخراج عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.

الإخراج:

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

يُظهر الإخراج بوضوح ناتج التعبير الذي أصبح ممكنًا فقط لأننا حددنا التطبيق على أنه تطبيق angularjs.

ng-init في AngularJS

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

مثال على ng-init

يوضح المثال أدناه كيفية استخدام التوجيه ng-init.

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

ng-init في 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="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

شرح الكود:

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

إذا تم تنفيذ التعليمات البرمجية بنجاح، فإن following سيتم عرض الإخراج عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.

الإخراج:

ng-init في AngularJS

في الإخراج،

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

ng-model في AngularJS

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

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

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

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

ng-model في 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="" 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>

شرح الكود:

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

إذا تم تنفيذ التعليمات البرمجية بنجاح، فإن following سيتم عرض الإخراج عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.

الإخراج:

ng-model في AngularJS

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

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

ng-model في AngularJS

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

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

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

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

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

نانوغرام تكرار في 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="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

شرح الكود:

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

إذا تم تنفيذ التعليمات البرمجية بنجاح، فإن following سيتم عرض الإخراج عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.

الإخراج:

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

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

نبذة عامة

  • تُستخدم التوجيهات لتوسيع وظائف HTML. يوفر Angular توجيهات يحمل في ثناياه عوامل مثل
    • ng-app - يُستخدم هذا لتهيئة التطبيق الزاوي.
    • ng-init – يُستخدم لإنشاء متغيرات التطبيق
    • ng-model - يُستخدم هذا لربط عناصر تحكم HTML ببيانات التطبيق
    • ng-repeat - يستخدم لتكرار العناصر باستخدام angular.