يعرف الأصدقاء الذين يعرفون HTML أن HTML لديه العديد من السمات. على سبيل المثال ، يمكن أن تحدد سمة HREF الخاصة بعلامة <AA> عنوان URL للرابط ، ويمكن استخدام سمة النوع الخاص بعلامة <Purns> لتحديد نوع الإدخال. يضيف توجيه AngularJS وظائف إلى تطبيقات AngularJS عن طريق توسيع سمات HTML.
يتم استخدام التوجيه AngularJS لتوسيع HTML. هذه كلها خصائص خاصة تبدأ ببادئة NG-. سنناقش التوجيهات التالية:
توجيهات AngularJS شائعة الاستخدام
يهيئة توجيه NG-APP تطبيق AngularJS.
يقوم توجيه NG-Init بتهيئة بيانات التطبيق.
يربط توجيه NG-Model قيم عنصر (مثل قيمة حقل الإدخال) إلى التطبيق.
أمر ng-app
يبدأ توجيه NG-APP تطبيق AngularJS. يحدد عنصر الجذر. يقوم تلقائيًا بتهيئة أو يبدأ تطبيقًا يقوم بتحميل صفحات الويب لتطبيق AngularJS. كما أنه يستخدم لتحميل العديد من وحدات AngularJS AngularJS. في المثال التالي ، نقوم بتحديد تطبيق AngularJS الافتراضي باستخدام سمة NG-App لعنصر DIV.
<div ng-app = ""> ... </div>
NG-Init التوجيه
يقوم توجيه NG-Init بتهيئة بيانات تطبيق AngularJS. يتم استخدامه لوضع القيم في التطبيق لاستخدام المتغيرات. في المثال التالي ، سنقوم بتهيئة مجموعة البلدان. استخدم بناء جملة JSON لتحديد صفائف البلدان.
<div ng-app = "" ng-init = "البلدان = [{locale: 'en-us' ، name: 'United States'} ، {locale: 'en-gb' ، name: 'United Kingdom'} ، {locale: 'en-fr' ، name: 'france'}]"> </div>NG-Model Command
يحدد توجيه NG-Model النماذج/المتغيرات المستخدمة في تطبيقات AngularJS. في المثال التالي ، نحدد نموذجًا يسمى "الاسم".
<div ng-app = ""> ... <p> أدخل اسمك: <input type = "text" ng-model = "name"> </p> </viv>
نانوغرام التكرار توجيه
يكرر توجيه NG-Repeat كل عنصر في مجموعة العناصر HTML. في المثال التالي ، قمنا بتكرار بلدان الصفيف.
<div ng-app = ""> ... <p> قائمة البلد مع لغة: </p> <ol> <li ng-repeat = "country in country"> {{'country:' + country.name + '، locale:' + country.locale}} </li> </ol> </div>مثال التوجيه AngularJS
<div ng-app = "" ng-init = "firstName = 'John'"> <p> حاول الدخول في مربع الإدخال: </p> <p> الاسم: <input
يخبر توجيه NG-APP AngularJS أن عنصر <viv> الحالي هو تطبيق AngularJS. يتم استخدام توجيه NG-Init لتهيئة البيانات ، وهو ما يعادل متغير التعريف في JavaScript. ربط البيانات في AngularJs ، مزامنة تعبيرات AngularJS وبيانات AngularJS. {{firstName}} متزامن بواسطة ng-model = "firstName". سيقوم المثال أعلاه بمزامنة المحتوى الذي أدخلته في مربع الإدخال في الصفحة.
يلاحظ
يمكن أن تحتوي صفحة الويب على تطبيقات AngularJS متعددة تعمل في عناصر مختلفة.
ليس من الشائع تهيئة البيانات باستخدام NG-Init. سوف تتعلم طريقة أفضل لتهيئة بياناتك في الفصول اللاحقة.
نانوغرام التكرار توجيه
سيكرر توجيه NG-Repeat عنصر HTML ، وهو ما يعادل كل حلقة في JavaScript.
<div ng-app = "" ng-init = "names = ['jani' ، 'hege' ، 'kai']"> <p> استخدم ng-repeat إلى صفائف الحلقة </p> <ul> <li ng-repeat = "x in names"> {x}} </li> </ul> </liv>سيتم تحليل المثال أعلاه في HTML التالية
<ul> <li> Jani </li> <li> Hege </li> <li> Kai </li> </ul>
يعمل NG-Repeat على صفيف الكائن:
<div ng-app = "" ng-init = "names = [{name: 'Jani' ، Country: 'Norway'} ، {name: 'Hege' ، Country: 'Sweden'} ، {name: 'kai' ، country: 'denmark'}] X.Country}} </li> </ul> </viv>سيتم تحليله في HTML التالية:
<ul> <li> Jani ، Norway </li> <li> Hege ، Sweden </li> <li> Kai ، Denmark </li> </ul>
الأوامر المخصصة
بالإضافة إلى التوجيهات المدمجة في AngularJS ، يمكننا أيضًا إنشاء توجيهات مخصصة. يمكنك استخدام الدالة .DIRICTION لإضافة توجيهات مخصصة. للاتصال بتوجيه مخصص ، تحتاج إلى إضافة اسم توجيه مخصص إلى عنصر HTML. استخدم طريقة الإبل لتسمية توجيه ، ASKH5DIRICTION ، ولكن عند استخدامه ، تحتاج إلى الانقسام -
<body ng-app = "myapp"> <eskh5-directive> </eskh5-directive> <script> var app = Angular.Module ("myapp" ، []) ؛ app.directive ("eskh5directive" ، function () {template:يتم تحليل المثال أعلاه على النحو التالي:
<h1> الأمر المخصص! </h1>
يمكن استدعاء الأمر بالطرق التالية:
اسم العنصر: <eskh5-directive> </eskh5-directive>
السمة: <Div Askh5-directive> </viv>
اسم الفصل: <Div> </viv>
التعليق: <!-التوجيه: ASKH5-DIRICTION->
تقييد استخدام التقييد
يمكن أن تكون قيمة تقييد ما يلي:
E فقط استخدم أسماء العناصر
العقارات متوفرة فقط
C فقط استخدم أسماء الفصول
M متاح فقط للتعليقات
القيمة الافتراضية للتقييد هي EA ، أي ، يمكن استدعاء الأمر من خلال اسم العنصر واسم السمة.
var app = Angular.Module ("myapp" ، []) ؛ app.directive ("eskh5directive" ، function () {return {rody: "a" ، template: "<h1> توجيه مخصص! </h1>"} ؛}) ؛سوف AngularJS أعلاه فقط مكالمات الممتلكات.
القراءات ذات الصلة:
AngularJS التعليمي التمهيدي: تعبيرات AngularJS
المحتوى أعلاه هو البرنامج التعليمي التمهيدي AngularJS من AngularJS الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!