การกำหนดเส้นทาง AngularJS
ในบทนี้เราจะแนะนำการกำหนดเส้นทาง AngularJS ให้คุณ
การกำหนดเส้นทาง AngularJS ช่วยให้เราสามารถเข้าถึงเนื้อหาที่แตกต่างกันผ่าน URL ที่แตกต่างกัน
AngularJs สามารถรับรู้เว็บแอปพลิเคชันหน้าเดียว (SPA) สำหรับหลายมุมมอง
โดยปกติแล้ว URL ของเราคือ http://runoob.com/first/page แต่ในเว็บแอปพลิเคชันหน้าเดียว AngularJs จะถูกนำไปใช้ผ่านแท็ก #+ ตัวอย่างเช่น:
http://runoob.com/#/first
http://runoob.com/#/Second
http://runoob.com/#/third
เมื่อเราคลิกลิงก์ใด ๆ ข้างต้นที่อยู่ที่เราร้องขอไปยังเซิร์ฟเวอร์จะเหมือนกัน (http://runoob.com/) เนื่องจากเนื้อหาหลังจากหมายเลข # จะถูกละเว้นโดยเบราว์เซอร์เมื่อร้องขอไปยังเซิร์ฟเวอร์ ดังนั้นเราจำเป็นต้องใช้ฟังก์ชั่นของเนื้อหาหลังจากหมายเลข # บนไคลเอนต์ การกำหนดเส้นทาง AngularJS ช่วยให้เราแยกความแตกต่างของหน้าโลจิคัลที่แตกต่างกันและผูกหน้าต่างๆกับคอนโทรลเลอร์ที่สอดคล้องกันผ่านแท็ก #+
ในรูปด้านบนเราจะเห็นว่า URL สอง URL ถูกสร้างขึ้น: /Showorders และ /AddNeworder URL แต่ละตัวมีมุมมองและคอนโทรลเลอร์ที่สอดคล้องกัน
ถัดไปลองดูตัวอย่างง่ายๆ:
<html> <head> <meta charset = "utf-8"> <title> ตัวอย่างการกำหนดเส้นทาง Angularjs-การสอนสามเณร </title> </head> <body ng-app = 'การกำหนดเส้นทาง Demoapp'> <h2> แอปพลิเคชั่นการกำหนดเส้นทาง </home </h2> <ul> <li> <li> <li> <li> <li> href = "#/คอมพิวเตอร์"> คอมพิวเตอร์ </a> </li> <li> <a href = "#/printers"> พิมพ์ </a> </li> <li> <a href = "#/blabla"> อื่น ๆ </a> </li> src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular-route/1.3.13/angular Angular.module ('RoutingDemoApp', ['ngroute']) .config (['$ routeProvider', ฟังก์ชั่น ($ routeProvider) {$ routeProvider. เมื่อ ('/', {เทมเพลต: 'นี่คือหน้าแรก'}) . เมื่อ ('/เครื่องพิมพ์', {เทมเพลต: 'นี่คือหน้าเครื่องพิมพ์'}). otherwise ({redirectto: '/'});}]); </script> </body> </html>ผลการทำงาน:
แอปพลิเคชันการกำหนดเส้นทาง AngularJS
การวิเคราะห์ตัวอย่าง:
1. โหลดไฟล์ JS ที่ใช้การกำหนดเส้นทาง: Angular-route.js
2. มันมีโมดูล ngroute เป็นโมดูลการพึ่งพาของโมดูลแอปพลิเคชันหลัก
Angular.module ('RoutingDemoApp', ['ngroute']))
3. ใช้คำสั่ง NGVIEW
<div ng-view> </div>
เนื้อหา HTML ภายใน DIV นี้จะเปลี่ยนไปตามการเปลี่ยนแปลงเส้นทาง
กำหนดค่า $ routeProvider, AngularJS $ RouteProvider ใช้เพื่อกำหนดกฎการกำหนดเส้นทาง
module.config (['$ routeProvider', ฟังก์ชั่น ($ routeProvider) {$ routeProvider. เมื่อ ('/', {เทมเพลต: 'นี่คือโฮมเพจ'}) เมื่อ ('/คอมพิวเตอร์', {เทมเพลต: 'นี่คือหน้าการจำแนกประเภทคอมพิวเตอร์') .Otherwise ({redirectTo: '/'});}]);ฟังก์ชั่นการกำหนดค่าของโมดูล AngularJS ใช้ในการกำหนดค่ากฎการกำหนดเส้นทาง ด้วยการใช้ configapi เราขอให้ $ routeProvider ถูกฉีดลงในฟังก์ชั่นการกำหนดค่าของเราและเพื่อกำหนดกฎการกำหนดเส้นทางของเราโดยใช้ $ routeProvider.whenapi
$ RouteProvider ให้เรามีฟังก์ชั่นเมื่อ (PATH, OBJECT) และอื่น ๆ (วัตถุ) กำหนดเส้นทางทั้งหมดตามลำดับและฟังก์ชั่นมีพารามิเตอร์สองตัว:
พารามิเตอร์แรกคือกฎปกติ URL หรือ URL
พารามิเตอร์ที่สองคือวัตถุการกำหนดค่าการกำหนดเส้นทาง
วัตถุการตั้งค่าการกำหนดเส้นทาง
การกำหนดเส้นทาง AngularJS ยังสามารถนำไปใช้ผ่านเทมเพลตที่แตกต่างกัน
พารามิเตอร์แรกของ $ RouteProvider เมื่อฟังก์ชั่นเป็นกฎปกติ URL หรือ URL และพารามิเตอร์ที่สองเป็นวัตถุการกำหนดค่าการกำหนดเส้นทาง
กฎไวยากรณ์สำหรับวัตถุการกำหนดค่าการกำหนดเส้นทางมีดังนี้:
$ routeprovider.when (url, {เทมเพลต: สตริง, templateurl: สตริง, คอนโทรลเลอร์: สตริง, ฟังก์ชั่นหรืออาร์เรย์, คอนโทรลเลอร์: สตริง, redirectto: สตริง, ฟังก์ชั่น, แก้ไข: วัตถุ <คีย์, ฟังก์ชัน>});คำอธิบายพารามิเตอร์:
เทมเพลต:
หากเราต้องการแทรกเนื้อหา HTML แบบง่าย ๆ ลงใน NG-View ให้ใช้พารามิเตอร์นี้:
. เมื่อ ('/คอมพิวเตอร์', {เทมเพลต: 'นี่คือหน้าการจำแนกคอมพิวเตอร์'})
templateurl:
หากเราต้องการแทรกไฟล์เทมเพลต HTML ใน NG-View ให้ใช้พารามิเตอร์นี้:
$ routeprovider.when ('/คอมพิวเตอร์', {templateurl: 'views/computers.html',});รหัสด้านบนจะได้รับเนื้อหาไฟล์ Views/Computers.html จากเซิร์ฟเวอร์และแทรกลงใน NG-View
คอนโทรลเลอร์:
ฟังก์ชั่นประเภทสตริงหรืออาร์เรย์ฟังก์ชั่นคอนโทรลเลอร์ที่ดำเนินการบนเทมเพลตปัจจุบันจะสร้างขอบเขตใหม่
คอนโทรลเลอร์:
ประเภทสตริงระบุนามแฝงสำหรับคอนโทรลเลอร์
เปลี่ยนเส้นทางไป:
ที่อยู่ของการเปลี่ยนเส้นทาง
แก้ไข:
ระบุโมดูลอื่น ๆ ที่คอนโทรลเลอร์ปัจจุบันขึ้นอยู่กับ
ตัวอย่าง
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" src = "http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"> </script> <script type = "text/javascript"> angular.module ('ngrouteexample' $ route;}). คอนโทรลเลอร์ ('AboutController', ฟังก์ชั่น ($ scope) {$ scope. $ route = $ route;}). config (ฟังก์ชั่น ($ routeProvider) {$ routeProvider. เมื่อ ('/home', {templateurl: 'embedded.home.html' 'Embedded.about.html', คอนโทรลเลอร์: 'Aboutcontroller'}) <script type = "text/ng-template" id = "embedded.about.html"> <h1> เกี่ยวกับ </h1> </script> <div> <div id = "การนำทาง"> <a href = "#/home"> home </a> <a href = "#/ </div> </body> </html>ผลการทำงาน:
บ้าน
บ้าน
ข้างต้นคือการรวบรวมข้อมูลเกี่ยวกับการกำหนดเส้นทาง AngularJS ฉันหวังว่านักเรียนที่สามารถช่วยการเขียนโปรแกรม AngularJS