رمز مثيل مسار التوجيه الزاوي

توجيه AngularJS

من الأهمية بمكان أن تكون قادرًا على القفز من عرض صفحة إلى أخرى. عندما تصبح التطبيقات أكثر تعقيدًا ، نحتاج إلى طريقة معقولة لإدارة الواجهات التي يراها المستخدمون أثناء الاستخدام. يمارس AngularJS لكسر العرض إلى طرق عرض تخطيط وقالب ، وعرض العرض المقابل وفقًا لعنوان URL الذي تم الوصول إليه حاليًا من قبل المستخدم.

توفر هذه المقالة مثالًا بسيطًا على توجيه AngularJS ويذكر بعض المفاهيم التي تتضمنها.

1. صفحة التخطيط

اقتباس البرامج النصية:

 <script src = "../ scripts/jquery-1.9.1.min.js"> </script> <script src = "../ scripts/Angular.min.js"> </script> <script src = "../ scripts/Angular-Route.min.js

تخطيط الصفحة بسيط نسبيًا:

 <viv> <ul> <li> <a href = "#page1"> انتقل إلى الصفحة 1 </a> </li> <li> <a href = "#page2"> اذهب إلى الصفحة 2 </a> </li> <li> <a href = "#others"> إلى صفحة أخرى </li> </li> </liv> <viv ng-

NG-View هو توجيه خاص توفره وحدة Ngroute التي تخبر AngularJS بمكان تقديم القالب. في هذا المثال ، نضع المحتوى الذي نحتاج إلى تقديمه إلى DIV أدناه. تشير الروابط الثلاثة أعلاه إلى ثلاث مرات عرض على التوالي.

2. صفحة قالب

قم بإنشاء صفحتين قالب ، يسمى subpage_1.html و subpage_2.html ، على التوالي.

3. تكوين قواعد التوجيه

 angular.module ("myrouteapp" ، ["ngroute"]) .Config (['$ routeprovider' ، function ($ routeprovider) {$ routeprovider. when ("/page1" ، {templateurl: }).

قم بتحميل وحدة Ngroute كاعتماد في تطبيقنا. استخدم وظيفة التكوين لتحديد المسارات في الوحدات النمطية أو التطبيقات ، واستخدم الطريقتين المقدمة من AngularJS لتحديد الطرق إلى التطبيقات.

templateurl:

يقرأ التطبيق العرض من خلال XHR (أو يقرأ من $ Templatecache) استنادًا إلى المسار المحدد بواسطة خاصية TemplateUrl. إذا كان يمكن العثور على هذا القالب وقراءته ، فإن AngularJS يجعل محتويات القالب في عنصر DOM مع توجيه NG-View.

إعادة التوجيه:

إذا كانت قيمة خاصية Redirectto عبارة عن سلسلة ، فسيتم استبدال المسار بهذه القيمة وسيتم تشغيل تغيير التوجيه وفقًا للمسار المستهدف. إذا كانت قيمة خاصية إعادة التوجيه وظيفة ، فسيتم استبدال المسار بقيمة إرجاع الوظيفة وسيتم تشغيل تغيير التوجيه وفقًا لهذا المسار الهدف.

نتائج التشغيل

انقر فوق "اذهب إلى الصفحة 1"

انقر فوق "اذهب إلى الصفحة 2"

رمز مثال مسار التوجيه الزاوي أعلاه هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.