يتم استخدام التوجيه AngularJS لتوسيع HTML. هذه كلها خصائص خاصة تبدأ ببادئة NG-. سنناقش التوجيهات التالية:
NG -APP - يبدأ هذا التوجيه في تطبيق AngularJS.
NG -Init - تهيئة هذا التوجيه بيانات التطبيق.
NG -Model - يحدد هذا التوجيه نموذجًا متغيرًا يستخدم في AngularJs.
NG -Repeat - سيكرر هذا التوجيه عناصر HTML لكل عنصر في المجموعة.
أمر 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 communy"> {{'country:' + country.name + '، locale:' + country.locale}}}مثال
ستظهر الأمثلة التالية جميع الإرشادات المذكورة أعلاه.
testangularjs.html
<html> <title> توجيهات AngularJS </title> <body> <h1> تطبيق عينة </h1> <div ng-app = "ng-init =" countre اسمك: <type type = "text" ng-model = "name"> </p> <p> hello <span ng-bind = "name"> </span>! </p> قائمة بالبلدان مع locale: </p> <ol> <li ng-repeat = "country in command" </ol> </viv> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>
الإخراج
افتح textangularjs.html في متصفح الويب. أدخل اسمك وشاهد النتائج التالية.
ما سبق هو المعلومات الأساسية لتوجيه AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!