توجيه AngularJS
في هذا الفصل ، سنقدم لك توجيه AngularJS.
يتيح لنا توجيه AngularJS الوصول إلى محتوى مختلف من خلال عناوين URL مختلفة.
يمكن لـ AngularJS تحقيق تطبيق ويب واحد للصفحة (SPA) للآراء المتعددة.
عادةً ما يكون عنوان URL الخاص بنا هو http://runoob.com/first/page ، ولكن في تطبيق ويب صفحة واحدة ، يتم تطبيق AngularJs من خلال #+ علامات ، على سبيل المثال:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
عندما نضغط على أي من الروابط أعلاه ، يكون العنوان الذي طلبناه إلى الخادم هو نفسه (http://runoob.com/). لأنه سيتم تجاهل المحتوى بعد الرقم # من قبل المتصفح عند طلبه إلى الخادم. لذلك نحن بحاجة إلى تنفيذ وظيفة المحتوى بعد رقم # على العميل. يساعدنا توجيه AngularJS على التمييز بين الصفحات المنطقية المختلفة وربط صفحات مختلفة بوحدة التحكم المقابلة من خلال العلامة #+.
في الشكل أعلاه ، يمكننا أن نرى أنه يتم إنشاء اثنين من عناوين URL: /Showorders و /AddNeworder. كل عنوان URL لديه طريقة عرض ووحدة تحكم مقابلة.
بعد ذلك ، دعونا نلقي نظرة على مثال بسيط:
<html> <head> <meta charset = "utf-8"> <title> angularjs مثال توجيه-تعليمي مبتدئ </title> </head> href = "#/computers"> أجهزة الكمبيوتر </a> </li> <li> <a href = "#/printers"> print </a> src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular-reoute/1.3.13/angular-route Angular.Module ('RoutingDemoApp' ، ['ngroute]) .config ([' $ routeprovider '، function ($ routeprovider) {$ routeprovider. when ('/'، {template: "هذا هو الصفحة الرئيسية'}). when ('/compomers' . </script> </body> </html>نتائج التشغيل:
تطبيق توجيه AngularJS
تحليل مثال:
1. قم بتحميل ملف JS الذي ينفذ التوجيه: angular-route.js.
2. أنه يحتوي على وحدة Ngroute كوحدة التبعية لوحدة التطبيق الرئيسية.
angular.module ('RoutingDemoapp' ، ['ngroute'])
3. استخدم توجيه NGVIEW.
<div ng-view> </viv>
سيتغير محتوى HTML داخل هذا DIV وفقًا لتغيير المسار.
تكوين $ Routeprovider ، يتم استخدام AngularJS $ Routeprovider لتحديد قواعد التوجيه.
module.config (['$ routeprovider' ، function ($ routeprovider) {$ routeprovider. when ('/' ، {template: 'هذا هو الصفحة الرئيسية'}). .يتم استخدام وظيفة التكوين لوحدة AngularJS لتكوين قواعد التوجيه. باستخدام configapi ، نطلب حقن $ routeProvider في وظيفة التكوين الخاصة بنا وتحديد قواعد التوجيه الخاصة بنا باستخدام $ conourseprovider. عندما.
يوفر لنا $ routeProvider الدالة When (Path ، Object) وأيضًا (كائن) تحدد جميع الطرق بالترتيب ، وتحتوي الوظيفة على معلمتين:
المعلمة الأولى هي عنوان URL أو عنوان URL العادي.
المعلمة الثانية هي كائن تكوين التوجيه.
كائن إعدادات التوجيه
يمكن أيضًا تنفيذ توجيه AngularJS من خلال قوالب مختلفة.
المعلمة الأولى من $ routeprovider.
قواعد بناء الجملة لتوجيه كائنات تكوين التوجيه هي كما يلي:
$ routeprovider. at (url ، {template: string ، templateurl: string ، controller: string ، function أو array ، controleras: string ، redirectto: string ، function ، relection: object <Key ، function>}) ؛وصف المعلمة:
نموذج:
إذا كنا بحاجة فقط إلى إدراج محتوى HTML بسيط في NG-View ، فاستخدم هذه المعلمة:
.
templateurl:
إذا كنا بحاجة فقط إلى إدراج ملف قالب HTML في NG-View ، استخدم هذه المعلمة:
$ routeprovider. at ('/computers' ، {templateurl: 'views/computers.html' ،}) ؛سيحصل الرمز أعلاه على محتوى ملفات المشاهدات/computers.html من الخادم وإدخاله في عرض NG-View.
وحدة التحكم:
الوظيفة أو السلسلة أو نوع الصفيف ، تقوم وظيفة وحدة التحكم التي تم تنفيذها على القالب الحالي بإنشاء نطاق جديد.
وحدة التحكم:
نوع السلسلة ، حدد الاسم المستعار لوحدة التحكم.
إعادة التوجيه:
عنوان إعادة التوجيه.
حل:
يحدد الوحدات الأخرى التي يعتمد عليها وحدة التحكم الحالية.
مثال
<html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js src = "http://apps.bdimg.com/libs/angular-reoute/1.3.13/angular-reoute.js"> </script> <script type = "text/javaScrpor $ route ؛}). وحدة التحكم ('aboutController' ، function ($ scope) {$ scope. $ route = $ route ؛}). config (function ($ routeprovider) {$ routeprovider. when ('/home' ، {templateurl: 'inbedded.home.html' ، controller: 'homecontroller ’ TEMPLATEURL: 'umbedded.about.html' ، وحدة التحكم: 'aboutController'}). </h1> </script> <script type = "text/ng-template" id = "inmedded.about.html"> <h1> about </h1> </script> <viv> <div id = "navigation"> <a href = "#/home" </viv> </viv> </viv> </body> </html>نتائج التشغيل:
homeabout
بيت
ما سبق هو مجموعة من المعلومات حول توجيه AngularJS. آمل أن يكون الطلاب الذين يمكنهم المساعدة في برمجة AngularJS.