توجيهات AngularJS
يتيح لك AngularJS توسيع HTML بسمات جديدة تسمى التوجيهات .
يحتوي AngularJS على مجموعة من التوجيهات المضمنة التي توفر وظائف لتطبيقاتك.
يتيح لك AngularJS أيضًا تحديد التوجيهات الخاصة بك.
توجيهات AngularJS
توجيهات AngularJS هي سمات HTML ممتدة بالبادئة ng-.
يقوم ng-appالتوجيه بتهيئة تطبيق AngularJS.
التوجيه ng-initيهيئ بيانات التطبيق.
يربط ng-modelالتوجيه قيمة عناصر تحكم HTML (الإدخال ، التحديد ، منطقة النص) ببيانات التطبيق.
اقرأ عن جميع توجيهات AngularJS في مرجع توجيه AngularJS الخاص بنا .
مثال
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
يخبر ng-appالتوجيه أيضًا AngularJS أن العنصر <div> هو "مالك" تطبيق AngularJS.
ربط البيانات
التعبير {{ firstName }}، في المثال أعلاه ، هو تعبير ربط بيانات AngularJS.
ربط البيانات في AngularJS يربط تعبيرات AngularJS ببيانات AngularJS.
{{ firstName }}لا بد من ng-model="firstName".
في المثال التالي ، تم ربط حقلين نصيين مع توجيهين من نموذج ng:
مثال
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ 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التوجيه العنصر الجذر لتطبيق AngularJS.
سيقوم ng-appالتوجيه تلقائيًا بتمهيد التطبيق (تلقائيًا تهيئة) عند تحميل صفحة ويب.
توجيه الحرارة
يحدد ng-initالتوجيه القيم الأولية لتطبيق AngularJS.
في العادة ، لن تستخدم ng-init. ستستخدم وحدة تحكم أو وحدة بدلاً من ذلك.
سوف تتعلم المزيد عن وحدات التحكم والوحدات لاحقًا.
توجيه النمذجة
يربط ng-modelالتوجيه قيمة عناصر تحكم HTML (الإدخال ، التحديد ، منطقة النص) ببيانات التطبيق.
يمكن 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>Made by a directive!</h1>"
};
});
</script>
</body>
يمكنك استدعاء توجيه باستخدام:
- اسم العنصر
- يصف
- فصل
- تعليق
ستؤدي جميع الأمثلة أدناه إلى نفس النتيجة:
اسم العنصر
<w3-test-directive></w3-test-directive>
يصف
<div w3-test-directive></div>
فصل
<div class="w3-test-directive"></div>
تعليق
<!-- directive: w3-test-directive -->
قيود
يمكنك تقييد توجيهاتك ليتم استدعاءها فقط من خلال بعض الطرق.
مثال
بإضافة restrictخاصية بالقيمة "A"، لا يمكن استدعاء التوجيه إلا من خلال السمات:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
قيم التقييد القانوني هي:
Eلاسم العنصرAللسمةCللصفMللتعليق
القيمة الافتراضية هي EA، مما يعني أنه يمكن لكل من أسماء العناصر وأسماء السمات استدعاء التوجيه.