يتيح لنا توجيه AngularJS الوصول إلى محتوى مختلف من خلال عناوين URL مختلفة.
يمكن لـ AngularJS تحقيق تطبيق ويب واحد للصفحة (SPA) للآراء المتعددة.
عادةً ما يكون عنوان URL الخاص بنا هو http://runoob.com/first/page ، ولكن في تطبيق صفحة واحدة يتم تطبيق AngularJs من خلال #+ ، على سبيل المثال:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
دعونا أولاً نلقي نظرة على طريقة خصائص كائن التكوين لـ $ Routeprovider:
دقة كائن إعداد التوجيه:
$ routeprovider. atmen (url (اسم التوجيه) ، {template: string (سلسلة مطالبة القالب) ، templateurl: السلسلة (url مسار القالب) ، وحدة تحكم: سلسلة ، وظيفة أو صفيف (إنشاء وحدة تحكم في القالب الحالي وإنشاء $ scop (الوحدة النمطية التي يعتمد عليها المسار الحالي)}) ؛الخطوات العامة لتنفيذ التوجيه:
الخطوة 1: استيراد وحدة Ngroute
<script type = "text/javaScript" src = "js/Angular-Route.min.js"> </script>
الخطوة 2: استخدم ngroute في وحدة التطبيق
Angular.Module ("Routeapp" ، ["ngroute"])
الخطوة 3: استخدم الأمر NG-View
<div ng-view ng-controller = 'defaultCtrl'> </viv>
الخطوة 4: تكوين قواعد توجيه $ routeprovider
.... config (['$ routeprovider' ، function ($ routeprovider) {$ routeprovider. when ('/home' ، {templateurl: 'home.tpl.html' ، controller: 'homectrl' ،}). 'phone.html' ،}).الخطوة 5: استخدم التوجيه من خلال الارتباطات التشعبية
<ul> <li> <a href = "#/home"> home </a> </li> <li> <a href = "#/comput
الحالة الكاملة:
1 route.html صفحة
<html> <head> <meta charset = "utf-8"> <title> مثيل توجيه AngularJS </title> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css"> </head> href = "#/home"> home </a> </li> <li> <a href = "#/computer"> كمبيوتر </a> </li> <li> <a href = "#/phone"> mobile </a> </li> <li> <a href = "#/others ng-controller = 'defaultCtrl'> </viv> <script type = "text/javaScript" src = "js/jquery.min.js"> </sctip> <script type = "text/javaScript" src = "js/bootstrap.min.js src = "js/angular.min.js"> </script> <script type = "text/javaScript" src = "js/Angular-Route.min.js"> </script> <script type = "text/ng-template" id = "home.tpl.html type = "text/ng-template" id = "other.tpl.html"> <h1> {{data}} </h1> </script> <script type = "text/javaScript . "others.tpl.html" ، وحدة التحكم: "otherctrl '،})}]) .Controller (' DefaultCtrl '، function ($ scope) {$ scope.computers = [{id: 0 ، name:" ac " المعرف: 2 ، الاسم: "Apple" ، الفئة: "اختبار" ، السعر: 4.25}] ؛ }] ؛ </html>2.Computer.html صفحة
<viv> <bood> <thead> <tr> <th> name </h> <th> الفئة </th> <th> السعر </th> <th> <td> {{item.category}} </td> <td> {{item.price | العملة}}} </td> <td> <button ng-click = "deleteproduct (item)"> delete </utton> <a href = "/edit/{{item.id}}}" ng-click = "editorcreateproduct (item) "> edit </a> </r> </tbody> </table> <viv> <button ng click = "editorcreateproduct ()> add </a> </viv> </viv>3. page.html صفحة
<viv> <bood> <thead> <tr> <th> name </h> <th> الفئة </th> <th> السعر </th> <th> <td> {{item.category}} </td> <td> {{item.price | العملة}}} </td> <td> <button ng-click = "deleteproduct (item)"> delete </utton> <a href = "/edit/{{item.id}}}" ng-click = "editorcreateproduct (item) "> edit </a> </r> </tbody> </table> <viv> <button ng click = "editorcreateproduct ()> add </a> </viv> </viv>انقر فوق الصفحة الرئيسية
انقر فوق "الكمبيوتر"
انقر فوق "الهاتف المحمول"
انقر فوق الآخر
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.