التوجيه AngularJS
AngularJS يمتد HTML مع خصائص جديدة تسمى التوجيهات.
يضيف AngularJS وظيفة إلى التطبيق من خلال التعليمات المدمجة.
يسمح لك AngularJS بتخصيص التوجيهات.
التوجيه AngularJS
توجيه AngularJS هو سمة HTML ممتدة مع البادئة ng-.
يهيئة توجيه NG-APP تطبيق AngularJS.
يقوم توجيه NG-Init بتهيئة بيانات التطبيق.
يربط توجيه NG-Model قيم عنصر (مثل قيمة حقل الإدخال) إلى التطبيق.
للحصول على تعليمات كاملة ، يرجى الرجوع إلى دليل مرجع AngularJS.
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <viv ng-app = "" " ng-init = "firstName = 'John'"> <p> حاول الدخول في مربع الإدخال: </p> <p> الاسم: <input type = "text" ng-model = "firstName"> </p> <p> لقد كتبت على النحو التالي: {{firstName}}نتائج التشغيل:
حاول الدخول في مربع الإدخال:
اسم:
ما كتبته هو: جون
يخبر توجيه NG-App AngularJS أن عنصر <viv> هو "مالك" تطبيق AngularJS.
ملاحظة: يمكن أن تحتوي صفحة الويب على تطبيقات AngularJS متعددة تعمل في عناصر مختلفة.
ربط البيانات
التعبير {{firstName}} في المثال أعلاه هو تعبير ربط بيانات AngularJS.
ربط البيانات في AngularJs ، مزامنة تعبيرات AngularJS وبيانات AngularJS.
{{firstName}} متزامن بواسطة ng-model = "firstName".
في المثال التالي ، تتم مزامنة حقول النصين بتوجيهين من النماذج NG:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js data-ng-init = "Quantity = 1 ؛ price = 5"> كمية حاسبة السعر: <type type = "number" ng-model = "Quantity"> السعر: <input type = "number" ng-model = "price"> <p> <b> الإجمالي السعر: </b> {{{price * price}}}}}نتائج التشغيل:
حاسبة السعر
كمية: سعر:
السعر الإجمالي: 5
ملاحظة: استخدام NG-Init ليس شائعًا جدًا. سوف تتعلم طريقة أفضل لتهيئة البيانات في فصل وحدة التحكم.
كرر عناصر HTML
يكرر توجيه NG-Repeat عنصر HTML:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js data-ng-init = "names = ['Jani' ، 'Hege' ، 'Kai']> <p> استخدم ng-repeat إلى صفائف الحلقة </p> <ul> <li data-ng-repeat =" x in names "> {{x}} </li>استخدم ng- كرر لحلق الصفيف
يتم استخدام توجيه NG-Repeat على مجموعة من الكائنات:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <viv ng-app = "" " ng-init = "names = [{name: 'Jani' ، Country: 'Norway'} ، {name: 'Hege' ، Country: 'Sweden'} ، {name: 'kai' ، country: 'denmark'}]"> <p> كائن الحلقة: </p> <ul> <li ng-repeat = "x in names" }} </li> </ul> </viv> </body> </html>كائن الحلقة:
يدعم NotangularJS تمامًا تطبيقات قاعدة البيانات (إضافة إنشاء ، قراءة ، تحديث ، تحديث ، حذف).
فكر في الكائنات في حالة سجلات في قاعدة بيانات.
أمر ng-app
يحدد توجيه NG-APPENT عنصر الجذر لتطبيق AngularJS.
توجيه NG-App Boots تلقائيًا (تلقائيًا) للتطبيق عند تحميل صفحة الويب.
سوف تتعلم لاحقًا كيف يتصل NG-APP بوحدة رمز من خلال قيمة (مثل ng-app = "mymodule").
NG-Init التوجيه
يحدد توجيه NG-Init القيمة الأولية لتطبيق AngularJS.
عادة ، لا يتم استخدام ng-init. سوف تستخدم وحدة تحكم أو وحدة بدلاً من ذلك.
سوف تتعلم المزيد عن وحدات التحكم والوحدات النمطية لاحقًا.
NG-Model Command
NG-Model يربط التوجيه عناصر HTML لبيانات التطبيق.
NG-Model يمكن أن تكون التعليمات أيضًا:
يوفر التحقق من النوع (الرقم ، البريد الإلكتروني ، المطلوب) لبيانات التطبيق.
يوفر الحالة (غير صالحة ، قذرة ، لمسة ، خطأ) لبيانات التطبيق.
يوفر فئة CSS لعناصر HTML.
ربط عناصر HTML إلى نموذج HTML.
نانوغرام التكرار توجيه
نسبة التوجيه NG-Repeat Clones HTML مرة واحدة لكل عنصر في المجموعة (في صفيف).
إنشاء توجيهات مخصصة
بالإضافة إلى التوجيهات المدمجة في AngularJS ، يمكننا أيضًا إنشاء توجيهات مخصصة.
يمكنك استخدام الدالة .DIRICTION لإضافة توجيهات مخصصة.
للاتصال بتوجيه مخصص ، تحتاج إلى إضافة اسم توجيه مخصص إلى عنصر HTML.
استخدم طريقة الإبل لتسمية توجيه ، RunoobDirivicive ، ولكن عند استخدامه ، تحتاج إلى تقسيم ، Runoob-Divicive:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-app = "myapp"> <runoob-diRective> </runoob-directive> <script> var app = Angular.Module ("myapp" ، []) ؛ app.directive ("runoobdirective" ، function () {return {template:نتائج التشغيل:
أوامر مخصصة!
يمكنك استدعاء التوجيه بالطرق التالية:
اسم العنصر
ملكية
اسم الفصل
تعليقات
يمكن للأمثلة التالية أيضًا إخراج نفس النتيجة:
اسم العنصر
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-app = "myapp"> <runoob-diRective> </runoob-directive> <script> var app = Angular.Module ("myapp" ، []) ؛ app.directive ("runoobdirective" ، function () {return {template:نتائج التشغيل:
أوامر مخصصة!
ملكية:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js runoob-diRective> </viv> <script> var app = Angular.Module ("myapp" ، []) ؛ app.directive ("runOobDiRective" ، function () {return {template: "custom directive!نتائج التشغيل:
أوامر مخصصة!
اسم الفصل:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js angular.module ("myapp" ، []) ؛ app.directive ("runOobDirective" ، function () {return {rody: "c" ، template: "c"! </p> </body> </html>أوامر مخصصة!
ملاحظة: يجب عليك تعيين قيمة تقييد "C" للاتصال بالتوجيه باسم الفصل.
ملحوظات:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js -> <script> var app = Angular.module ("myapp" ، []) ؛ app.directive ("runOobDirective" ، function () {return {rody: "m" ، استبدال: صواب ، قالب: مرئي. </p> <p> <strong> ملاحظة: </strong> يجب تعيين قيمة <b> تقييد </b> إلى "M" لاستدعاء التوجيه من خلال التعليقات. </p> </body> </html>نتائج التشغيل:
أوامر مخصصة!
ملاحظة: نحتاج إلى إضافة سمة استبدال إلى هذه المثيل ، وإلا فلن تكون التعليقات مرئية.
ملاحظة: يجب عليك تعيين قيمة تقييد "M" للاتصال بالتوجيه من خلال التعليقات.
الاستخدام المقيد
يمكنك تقييد توجيهاتك ليتم استدعاؤها فقط بطرق محددة.
مثال
عن طريق إضافة خاصية تقييد وتحديد القيمة فقط إلى "A" ، لا يمكن استدعاء الأمر إلا من خلال السمات:
رمز المثال:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-app = "myapp"> <runoob-diRective> </runoob-directive> <div runoob-directive> </viv> <script> var app = Angular.Module ("myapp" ، []) ؛ app.directive ("runoobdiroctive" ، function () } ؛}) ؛ </script> <p> <strong> ملاحظة: </strong> لا يمكن استدعاء التوجيه إلا من خلال سمات عناصر HTML عن طريق تعيين <strong> تقييد </strong> قيمة السمة إلى "A". </p> </body> </html>نتائج التشغيل:
أوامر مخصصة!
ملاحظة: لا يمكن استدعاء أمر الإعداد إلا عن طريق تعيين قيمة سمة تقييد إلى "A".
يمكن أن تكون قيمة تقييد ما يلي:
E فقط استخدم أسماء العناصر
العقارات متوفرة فقط
C فقط استخدم أسماء الفصول
M متاح فقط للتعليقات
القيمة الافتراضية للتقييد هي EA ، أي ، يمكن استدعاء الأمر من خلال اسم العنصر واسم السمة.
ما سبق هو تجميع معلومات تعليمات AngularJS ، وسيستمر استكماله لاحقًا