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