รหัสอินสแตนซ์เส้นทางการกำหนดเส้นทางเชิงมุม

การกำหนดเส้นทาง 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"

เค้าโครงของหน้านั้นค่อนข้างง่าย:

 <div> <ul> <li> <a href = "#page1"> ไปหน้า 1 </a> </li> <li> <a href = "#page2"> ไปหน้า 2 </a> </li> <li> <a href = "#อื่น ๆ "> ไปยังหน้าอื่น ๆ </a> </li>

NG-View เป็นคำสั่งพิเศษที่จัดทำโดยโมดูล ngroute ที่บอก AngularJs ว่าจะแสดงเทมเพลตได้ที่ไหน ในตัวอย่างนี้เราใส่เนื้อหาที่เราจำเป็นต้องแสดงใน DIV ด้านล่าง ลิงก์สามตัวข้างต้นชี้ไปที่มุมมองสามมุมมองตามลำดับ

2. หน้าเทมเพลต

สร้างหน้าเทมเพลตสองหน้าเรียกว่า subpage_1.html และ subpage_2.html ตามลำดับ

3. กฎการกำหนดเส้นทางการกำหนดเส้นทางการกำหนดเส้นทาง

 Angular.module ("MyRouteApp", ["NgRoute"]) .config (['$ routeProvider', ฟังก์ชั่น ($ routeProvider) {$ routeProvider. เมื่อ ("/page1", {templateurl: "subpage_1.html"}) .Otherwise ({redirectto: "/"});}]);

โหลดโมดูล ngroute เป็นการพึ่งพาในแอปพลิเคชันของเรา ใช้ฟังก์ชั่นการกำหนดค่าเพื่อกำหนดเส้นทางในโมดูลหรือแอปพลิเคชันและใช้สองวิธีที่จัดทำโดย AngularJS เพื่อกำหนดเส้นทางไปยังแอปพลิเคชัน

templateurl:

แอปพลิเคชันอ่านมุมมองผ่าน XHR (หรืออ่านจาก $ templatecache) ตามเส้นทางที่ระบุโดยคุณสมบัติ templateurl หากเทมเพลตนี้สามารถพบและอ่านได้ AngularJS จะแสดงเนื้อหาของเทมเพลตลงในองค์ประกอบ DOM ที่มีคำสั่ง NG-VIEW

เปลี่ยนเส้นทางไป:

หากค่าของคุณสมบัติ RedirectTo เป็นสตริงเส้นทางจะถูกแทนที่ด้วยค่านี้และการเปลี่ยนแปลงการกำหนดเส้นทางจะถูกเรียกใช้ตามเส้นทางเป้าหมาย หากค่าของคุณสมบัติ RedirectTo เป็นฟังก์ชันเส้นทางจะถูกแทนที่ด้วยค่าส่งคืนของฟังก์ชันและการเปลี่ยนแปลงการกำหนดเส้นทางจะถูกเรียกใช้ตามเส้นทางเป้าหมายนี้

การรันผลลัพธ์

คลิกไปหน้า 1

คลิกไปหน้า 2

รหัสตัวอย่างเส้นทางการกำหนดเส้นทางเชิงมุมข้างต้นเป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น