يدعم AngularJS تطبيق صفحة واحدة من خلال طرق عرض متعددة على صفحة واحدة. للقيام بذلك ، يوفر AngularJS توجيهات NG-View و NG-Template ، بالإضافة إلى خدمات $ routeprovider.
NG-View
تقوم علامة NG-View ببساطة بإنشاء عنصر نائب ، وهو عرض مقابل (عرض HTML أو NG-Template) يمكن وضعه وفقًا للتكوين.
يستخدم
تحديد Div و NG-View في الوحدة الرئيسية.
<div ng-app = "mainapp"> ... <div ng-view> </viv> </viv>
ng-template
يتم استخدام توجيه NG-Template لإنشاء طرق عرض HTML باستخدام علامات البرنامج النصي. أنه يحتوي على خاصية "ID" لعرض وحدة التحكم التي تم تعيينها بواسطة $ Routeprovider.
يستخدم
حدد النوع على أنه كتلة البرنامج النصي لـ NG-Template في الوحدة الرئيسية.
<div ng-app = "mainapp"> ... <script type = "text/ng-template" id = "addstudent.html"> <h2> أضف الطالب </h2> {{message}} </script> </viv>$ Routeprovider
$ Routeprovider هو تكوين عناوين URL للمجموعة ، ويقوم بتعيينها إلى صفحة HTML المقابلة أو NG-Template ، وتوصيل خدمة تستخدم نفس المفاتيح إلى وحدة التحكم.
يستخدم
حدد النوع على أنه كتلة البرنامج النصي لـ NG-Template في الوحدة الرئيسية.
<div ng-app = "mainapp"> ... <script type = "text/ng-template" id = "addstudent.html"> <h2> أضف الطالب </h2> {{message}} </script> </viv>يستخدم
حدد كتلة البرنامج النصي للوحدة الرئيسية وتعيين تكوين التوجيه.
var mainapp = Angular.module ("mainapp" ، ['ngroute']) ؛ mainapp.config (['$ routeprovider' ، function ($ routeprovider) {$ routeprovider. عندما ('/addstudent' ، {templateurl: 'addstudent.html' ، controller: 'addstudentController'}). "ViewStudentsController"}).فيما يلي قضايا مهمة يجب مراعاتها في المثال أعلاه
يتم تعريف $ Routeprovider على أنه وظيفة التكوين لوحدة MainApp باستخدام الكلمة الرئيسية باسم "$ Routeprovider" ؛
$ routeProvider عندما يتم تعريف عنوان URL "/addstudent" ، فإن الخرائط إلى "addstudent.html". يجب أن توجد addstudent.html على نفس المسار مثل صفحة HTML الرئيسية. إذا لم يتم تعريف صفحة HTM ، فسيتم استخدام ng-template بواسطة id = "addstudent.html". لقد استخدمنا ng-template.
"خلاف ذلك" هو العرض الافتراضي المستخدم لضبطه ؛
يتم استخدام "Conlloer" لتعيين وحدة التحكم المقابلة للعرض ؛
مثال
ستظهر الأمثلة التالية جميع الإرشادات المذكورة أعلاه.
testangularjs.html
<html> <head> <title> views js Angular </title> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-reoute.min.js"> </script> <body> <h2> angularjs تطبيق عينة </h2> <p> <a href = "#viewstudents"> عرض الطلاب </a> </p> <div ng-view> </viv> <script type = "text/ng-template" id = "addstudent.html"> <h2> إضافة طالب </h2> {{message}} <//script. id = "viewStudents.html"> <h2> عرض الطلاب </h2> {{message}} </script> <script> var mainapp = Angular.Module ("MainApp" ، ['ngroute']) ؛ mainapp.config (['$ routeprovider' ، function ($ routeprovider) {$ routeprovider. عندما ('/addstudent' ، {templateurl: 'addstudent.html' ، controller: 'addstudentController'}). "ViewStudentsController"}). mainapp.controller ('addstudentController' ، function ($ scope) {$ scope.message = "سيتم استخدام هذه الصفحة لعرض نموذج الطالب إضافة" ؛}) ؛ MainApp.Controller ('ViewStudentsController' ، function ($ scope) {$ scope.message = "سيتم استخدام هذه الصفحة لعرض جميع الطلاب" ؛}) ؛ </script> </body> </html>نتيجة
افتح textangularjs.html في متصفح الويب. النتائج كما يلي:
ما سبق هو مجموعة من معلومات AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لدعمكم لهذا الموقع!