فرضية
أولاً ، تحتاج إلى تقديم رحلة زاوية وزاوية على الصفحة. لاحظ أنك تحتاج إلى إدخال الزاوي قبل أن يكون الزاوي.
<script src = "../../ bower_components/Angular/Angular.js"> </script>
<script src = "../../ bower_components/angular-route/Angular-Route.js"> </script>
ويرجع ذلك أساسًا إلى أن angular-route.js يحتاج إلى المرور في window.angular ، وستظهر هذه المعلمة فقط بعد تحميل الزاوي.
(وظيفة (نافذة ، زاوي ، غير محدد) {'استخدم صارم' ؛ ... ngroutemodule.directive ('ngview' ، ngviewfactory) ؛ ...}) (window ، window.angular) ؛يمكنك تنزيله على الموقع الرسمي أو تثبيته باستخدام Bower.
يشرح
يتم تنفيذ وظيفة التوجيه بواسطة خدمة RouteProvider و NG-View. NG-View يعادل توفير نقطة جبل قالب الصفحة. عند تبديل عنوان URL للقفز ، سيتم وضع قوالب صفحات مختلفة في موقع NG-View ؛ ثم يتم استخدام Routeprovider لتكوين رسم الخرائط.
هناك طريقتان بشكل عام:
عندما (): تكوين المسار والمعلمات ؛
خلاف ذلك: تكوين قفزات مسار أخرى ، يمكنك التفكير في الأمر على أنه افتراضي.
المعلمة الثانية عندما:
وحدة التحكم: وظيفة وحدة التحكم أو اسم المسار المقابل
وحدة التحكم: امنح وحدة التحكم اسم الاسم المستعار
القالب: سيظهر قالب الصفحة المقابل للمسار في NG-View ، مثل "<viv> xxxx </viv>"
templateurl: المسار المقابل للقالب ، مثل "src/xxx.html"
حل: تركز هذه المعلمة على حقيقة أن هذه الخاصية ستربط الخدمات أو القيم إلى وحدة التحكم ذات الصلة بالمسار في شكل كائن زوج القيمة الرئيسية. ثم يتم حقن قيمة نتيجة التنفيذ أو مرجع الخدمة المقابلة في وحدة التحكم. إذا كان الحل هو كائن وعد ، فسوف ينتظر حتى ينفذ بنجاح قبل حقنه في وحدة التحكم. في هذا الوقت ، ستنتظر وحدة التحكم أن يؤدي التنفيذ إلى حل.
للحصول على أمثلة مفصلة ، يرجى الرجوع إلى الأمثلة التالية.
إعادة التوجيه: إعادة توجيه العنوان
Reloadonsearch: تعيين ما إذا كان سيتم تحميل القالب المقابل فقط عند تغيير العنوان ؛ لن يتم تحميل البحث ولا المعلمات.
caseinsensitivematch: المسار حساس للحالة
هناك العديد من الأحداث شائعة الاستخدام للتوجيه:
$ routechangestart: سيتم تشغيل هذا الحدث قبل أن يقفز المسار
$ Routechangesuccess: يتم تشغيل هذا الحدث بعد نجاح قفزة الطريق
$ routechangeerror: يتم إطلاق هذا الحدث بعد فشل قفزة الطريق
يستخدم
في الصفحة ، اكتب رابط الزر إلى قفزة عنوان URL وعلامة NG-View
<div ng-controller = "myctrl"> <ul> <li> <a href = "#/a"> انقر فوق a </a> </li> <li> <a href = "#/b"> انقر فوق b </a> </li> </ul> <ng-view> </g-
من بينها ، يمكن اعتبار NG-View عنصرًا أو ملصقًا ، إلخ.
التكوينات ذات الصلة التي يجب تحديدها في JavaScript
<script type = "text/javaScript"> Angular.module ("myapp" ، ["ngroute"]) .Controller ("acontroller" ، function ($ scope ، $ route) {$ scope.hello = "hello ، a!" ؛ .Controller ("myctrl" ، الدالة (scope $ ، $ location) {$ scope. $ on ("$ viewContentLoaded" ، function () {console.log ("ng-view content loaded! Console.log ("تغيير الطريق!") ؛ }) .config (function ($ routeprovider ، $ locationprovider) {$ routeprovider. when ('/a' ، {templateurl: 'A.Html' ، controller: 'acontroller'}). تأخير: $ Q ، $ timeout) </script>في الكود أعلاه ، يرتبط حل في مسار /B بطريقة التأخير. هذه الطريقة تُرجع كائن الوعد وسيعود النتيجة إلا بعد 3 ثوان. لذلك ، لن يتم تحميل صفحة B بنجاح بعد 3 ثوان.
هناك حاجة إلى اثنين من HTML إضافية:
A.HTML:
<div ng-controller = "acontroller" style = "الارتفاع: 500px ؛ العرض: 100 ٪ ؛ خلفية اللون: الأخضر ؛"> {{hello}} </div>
و B.HTML:
<div ng-controller = "bcontroller" style = "الارتفاع: 2500px ؛ العرض: 100 ٪ ؛ خلفية اللون: الأزرق ؛"> {{hello}} </div>
بهذه الطريقة ، يمكن تحقيق قفزة الطريق.
يمكن الرجوع إلى جميع الرموز:
<html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text/html ؛ src = "../../ bower_components/Angular-Route/Angular-Route.js"> </script> <body> <div ng-controller = "myctrl"> <ul> <li> <s href = "#/a"> انقر فوق </a> <li> <li> <ng-view> </gow-view> <!-<div ng-view> </viv>-> </viv> <script type = "text/javaScript"> Angular.Module ("myapp" ، ["ngroute"]). .Controller ("BController" ، Function ($ scope) {$ scope.hello = "hello ، b! $ scope. $ on ("$ routechangestart" ، function (event ، next ، current) {//event.preventdefault () ؛ }) .config (function ($ routeprovider ، $ locationprovider) {$ routeprovider. when ('/a' ، {templateurl: 'A.Html' ، controller: 'acontroller'}). تأخير: $ Q ، $ timeout) </script> </body> </html>ما سبق هو المعلومات التي تقوم بفرز معلومات توجيه AngularJS ng-route. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!