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" .
في المثال التالي ملزمة حقلين النص جنبا إلى جنب مع اثنين من توجيهات نانوغرام نموذج:
مثال
<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-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>
انها محاولة لنفسك » يمكنك استدعاء التوجيه باستخدام:
- اسم العنصر
- السمة
- صف مدرسي
- التعليق
والأمثلة الواردة أدناه عن إنتاج نفس النتيجة:
قيود
يمكنك تقييد التوجيهات الخاصة بك لطلبه إلا من خلال بعض الطرق.
مثال
بإضافة 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 ، وهذا يعني أن كلا من أسماء العناصر وأسماء السمة يمكن استدعاء التوجيه.