การกำหนดเส้นทาง 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.when (url (ชื่อเส้นทาง), {เทมเพลต: สตริง (สตริงพรอมต์เทมเพลต), tymplateurl: สตริง (URL เส้นทางเทมเพลต), คอนโทรลเลอร์: สตริง, ฟังก์ชั่นหรืออาร์เรย์ (สร้างคอนโทรลเลอร์ในเทมเพลตปัจจุบัน ขึ้นอยู่กับ)});ขั้นตอนทั่วไปในการใช้งานการกำหนดเส้นทาง:
ขั้นตอนที่ 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'> </div>
ขั้นตอนที่ 4: กำหนดค่ากฎการกำหนดเส้นทาง $ RouteProvider
.... config (['$ routeprovider', ฟังก์ชั่น ($ routeProvider) {$ routeProvider. เมื่อ ('/home', {templateurl: 'home.tpl.html', คอนโทรลเลอร์: 'phone.html',}). เมื่อ ('/อื่น ๆ ', {templateurl: 'other.tpl.html', คอนโทรลเลอร์: 'otherctrl',})}]) ...ขั้นตอนที่ 5: ใช้การกำหนดเส้นทางผ่านไฮเปอร์ลิงก์
<ul> <li> <a href = "#/home"> บ้าน </a> </li> <li> <a href = "#/คอมพิวเตอร์"> คอมพิวเตอร์ </a> </li> <li> <a href = "#/phone"> มือถือ </a> </li> <li>
กรณีที่สมบูรณ์:
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 = "#/คอมพิวเตอร์"> คอมพิวเตอร์ </a> </li> <li> <a href = "#/phone"> มือถือ </a> </li> <li> <a href = "#/อื่น ๆ " ng-controller = 'defaultctrl'> </div> <script type = "text/javascript" src = "js/jQuery.min.js"> </script> <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 = "อื่น ๆ . tpl.html"> <h1> {{data}} </h1> </script> <script type = "text/javascript"> angular.module ("Routeapp", ["ngroute") . เมื่อ ('/home', {templateurl: 'home.tpl.html', คอนโทรลเลอร์: 'homectrl',}). เมื่อ ('/คอมพิวเตอร์', {templateurl: 'คอมพิวเตอร์. html',}) ('/โทรศัพท์', {templateurl: 'phone.html' 'อื่น ๆ tpl.html', คอนโทรลเลอร์: 'otherctrl',})}]) .controller ('defaultctrl', ฟังก์ชั่น ($ scope) {$ scope.computers = [{id: 0, ชื่อ: "ACR", หมวดหมู่: "ทดสอบ" {id: 2, ชื่อ: "Apple", หมวดหมู่: "ทดสอบ", ราคา: 4.25}]; 4.25}];}). controller ("homectrl", ฟังก์ชั่น ($ scope, $ route) {$ scope. $ route = $ route; $ scope.data = "Home Home";}) </html>2. computer.html หน้า
<div> <table> <thead> <tr> <th> ชื่อ </th> <th> หมวดหมู่ </th> <th> ราคา </th> <th> {{data}}} </th> </tr> </thead> <tbody> <td> {{item.category}} </td> <td> {{item.price | สกุลเงิน}} </td> <td> <button ng-click = "deleteProduct (รายการ)"> ลบ </button> <a href = "/แก้ไข/{{item.id}}" ng-click = "editorCreateProduct (รายการ)"> edit </a> </tbody> </table> <div> <button ng-click = "editorCreateProduct ()"> เพิ่ม </a> </div> </div>3.Phone.html หน้า
<div> <table> <thead> <tr> <th> ชื่อ </th> <th> หมวดหมู่ </th> <th> ราคา </th> <th> {{data}}} </th> </tr> </thead> <tbody> <ttr ng-repeat = " <td> {{item.category}} </td> <td> {{item.price | สกุลเงิน}} </td> <td> <button ng-click = "deleteProduct (รายการ)"> ลบ </button> <a href = "/แก้ไข/{{item.id}}" ng-click = "editorCreateProduct (รายการ)"> edit </a> </tbody> </table> <div> <button ng-click = "editorCreateProduct ()"> เพิ่ม </a> </div> </div>คลิกโฮมเพจ
คลิก "คอมพิวเตอร์"
คลิก "มือถือ"
คลิกอื่น ๆ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น