หลักฐาน
ก่อนอื่นคุณต้องแนะนำ Angular และ Angular-Route บนหน้า โปรดทราบว่าคุณต้องแนะนำ Angular ก่อนเส้นทางเชิงมุม
<script src = "../../ bower_components/angular/angular.js"> </script>
<script src = "../../ bower_components/angular-route/angular-route.js"> </script>
นี่เป็นส่วนใหญ่เป็นเพราะ angular-route.js จำเป็นต้องส่งผ่านใน window.gular พารามิเตอร์และพารามิเตอร์นี้จะปรากฏขึ้นหลังจากโหลดเชิงมุมเท่านั้น
(ฟังก์ชั่น (หน้าต่าง, เชิงมุม, ไม่ได้กำหนด) {'ใช้อย่างเข้มงวด'; ... ngroutemodule.directive ('ngview', ngviewfactory); ... }) (window, window.angular);คุณสามารถดาวน์โหลดได้บนเว็บไซต์อย่างเป็นทางการหรือติดตั้งโดยใช้ Bower
อธิบาย
ฟังก์ชั่นการกำหนดเส้นทางดำเนินการโดยบริการ RouteProvider และ NG-View NG-View เทียบเท่ากับการจัดหาจุดเมาท์ของเทมเพลตหน้า เมื่อสลับ URL สำหรับการกระโดดเทมเพลตหน้าต่างๆจะถูกวางไว้ที่ตำแหน่งของ NG-View; จากนั้น RouteProvider จะใช้ในการกำหนดค่าการแมปเส้นทาง
มีสองวิธีโดยทั่วไป:
เมื่อ (): กำหนดค่าพา ธ และพารามิเตอร์;
มิฉะนั้น: กำหนดค่าเส้นทางการกระโดดอื่น ๆ คุณสามารถคิดว่ามันเป็นค่าเริ่มต้น
พารามิเตอร์ที่สองของเมื่อ:
คอนโทรลเลอร์: ฟังก์ชันคอนโทรลเลอร์หรือชื่อของเส้นทางที่เกี่ยวข้อง
Controlleras: ตั้งชื่อนามแฝงให้คอนโทรลเลอร์
เทมเพลต: เทมเพลตหน้าเว็บที่สอดคล้องกับพา ธ จะปรากฏขึ้นที่ NG-View เช่น "<div> xxxx </div>"
TemplateUrl: เส้นทางที่สอดคล้องกับเทมเพลตเช่น "SRC/XXX.html"
การแก้ไข: พารามิเตอร์นี้มุ่งเน้นไปที่ความจริงที่ว่าคุณสมบัตินี้จะผูกมัดบริการหรือค่าเข้ากับคอนโทรลเลอร์ที่เกี่ยวข้องกับการกำหนดเส้นทางในรูปแบบของวัตถุคู่คีย์-ค่า จากนั้นค่าผลลัพธ์การดำเนินการหรือการอ้างอิงบริการที่เกี่ยวข้องจะถูกฉีดลงในคอนโทรลเลอร์ หากการแก้ไขเป็นวัตถุสัญญามันจะรอจนกว่าจะดำเนินการสำเร็จก่อนที่จะถูกฉีดเข้าไปในคอนโทรลเลอร์ ในเวลานี้คอนโทรลเลอร์จะรอผลการดำเนินการในการแก้ไข
สำหรับตัวอย่างโดยละเอียดโปรดดูตัวอย่างต่อไปนี้
เปลี่ยนเส้นทาง: เปลี่ยนเส้นทางที่อยู่
Reloadonsearch: ตั้งค่าว่าเทมเพลตที่เกี่ยวข้องจะถูกโหลดเฉพาะเมื่อที่อยู่มีการเปลี่ยนแปลง การค้นหาหรือพารามิเตอร์จะไม่ถูกโหลด
caseinsensitiveMatch: เส้นทางเป็นตัวพิมพ์เล็ก
มีหลายเหตุการณ์ที่ใช้กันทั่วไปสำหรับการกำหนดเส้นทาง:
$ routechangestart: เหตุการณ์นี้จะถูกเรียกใช้ก่อนที่เส้นทางจะกระโดด
$ routechangesuccess: เหตุการณ์นี้เกิดขึ้นหลังจากการกระโดดเส้นทางสำเร็จ
$ RouteChangeError: เหตุการณ์นี้ถูกไล่ออกหลังจากการกระโดดเส้นทางล้มเหลว
ใช้
ในหน้าเขียนลิงค์ปุ่มไปยัง URL Jump และแท็ก NG-View
<div ng-controller = "myctrl"> <ul> <li> <a href = "#/a"> คลิก a </a> </li> <li> <a href = "#/b"> คลิก b </a> </li>
ในหมู่พวกเขามุมมอง NG ถือได้ว่าเป็นองค์ประกอบหรือฉลาก ฯลฯ
การกำหนดค่าที่เกี่ยวข้องซึ่งจำเป็นต้องกำหนดไว้ใน JavaScript
<script type = "text/javascript"> angular.module ("myapp", ["ngroute"]). controller ("acontroller", ฟังก์ชั่น ($ scope, $ route) {$ scope.hello = "hello, a!";}). controller .Controller ("myctrl", ฟังก์ชั่น ($ scope, $ ตำแหน่ง) {$ scope. $ on ("$ viewContentloaded", function () {console.log ("เนื้อหา ng-view โหลด!");}); $ scope. $ on ("$ routechangestart" console.log ("การเปลี่ยนเส้นทางเริ่มต้น!"); }) .config (ฟังก์ชั่น ($ routeProvider, $ locationProvider) {$ routeProvider. เมื่อ ('/a', {templateurl: 'a.html', คอนโทรลเลอร์: 'acontroller'}). ('/b', {templateurl: ฟังก์ชั่น ($ q, $ timeout) {var delay = $ q.defer (); </script>ในรหัสข้างต้นการแก้ไขในเส้นทาง /b นั้นเชื่อมโยงกับวิธีการหน่วงเวลา วิธีนี้ส่งคืนวัตถุสัญญาและจะส่งคืนผลลัพธ์หลังจาก 3 วินาทีเท่านั้น ดังนั้นหน้า B จะไม่โหลดสำเร็จหลังจาก 3 วินาที
จำเป็นต้องมี HTML เพิ่มเติมสองรายการ:
A.HTML:
<div ng-controller = "acontroller" style = "ความสูง: 500px; ความกว้าง: 100%; พื้นหลัง-สี: สีเขียว;"> {{{hello}} </div>
และ b.html:
<div ng-controller = "bcontroller" style = "ความสูง: 2500px; ความกว้าง: 100%; พื้นหลัง-สี: สีน้ำเงิน"
ด้วยวิธีนี้การกระโดดเส้นทางสามารถทำได้
รหัสทั้งหมดสามารถอ้างอิงได้:
<html ng-app = "myapp"> <head> <meta http-equiv = "content-type" เนื้อหา = "text/html; charset = utf-8"/> <script src = "../../ bower_components/angular/angular.js" src = "../../ bower_components/angular-route/angular-route.js"> </script> <body> <div ng-controller = "myctrl"> <ul> <li> <a href = "#/a"> คลิก A </a> </li> <ng-view> </ng-view> <!-<div ng-view> </div>-> </div> <script type = "text/javascript"> angular.module ("myapp", ["ngroute"]) .Controller ("bcontroller", ฟังก์ชั่น ($ scope) {$ scope.hello = "สวัสดี, b!";}). controller ("myctrl", ฟังก์ชั่น ($ scope, $ ตำแหน่ง) {$ scope. $ on ("$ viewcontentloaded", ฟังก์ชัน () $ scope. $ on ("$ routechangestart", ฟังก์ชั่น (เหตุการณ์, ถัดไป, ปัจจุบัน) {//event.preventdefault (); // ยกเลิก URL เปลี่ยน console.log ("การเปลี่ยนเส้นทางเริ่มต้น!");});}); }) .config (ฟังก์ชั่น ($ routeProvider, $ locationProvider) {$ routeProvider. เมื่อ ('/a', {templateurl: 'a.html', คอนโทรลเลอร์: 'acontroller'}). ('/b', {templateurl: 'B.Html' ฟังก์ชั่น ($ q, $ timeout) {var delay = $ q.defer (); </script> </body> </html>ข้างต้นคือข้อมูลการเรียงลำดับข้อมูลการกำหนดเส้นทาง Angularjs ng-route เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!