เมื่อเร็ว ๆ นี้เพื่อนร่วมงานพบปัญหาบางอย่างในกระบวนการเรียนรู้เส้นทางและแม่แบบ ดังนั้นวันนี้ฉันเขียนตัวอย่างให้เธอและแบ่งปันกับผู้ที่กำลังเรียนรู้ AngularJS
การพูดถึงโครงการพัฒนา AngularJS นั้นน่าตื่นเต้นมากและความสนุกคือรูปแบบการพัฒนาทำให้รหัสชัดเจนขึ้นอ่านง่ายขึ้นกระชับและบำรุงรักษามากขึ้น อย่างไรก็ตามยังมีสิ่งต่าง ๆ ที่ทำให้ฉันปวดหัวเมื่อพัฒนาโดยใช้ AngularJs นั่นคือเฟรมเวิร์กส่วนหน้าในปัจจุบันมุ่งเน้นไปที่ jQuery มากขึ้นและปลั๊กอินจำนวนมากพึ่งพา jQuery และมีปลั๊กอินน้อยมากสำหรับ angulajs (ฉันไม่รู้จักปลั๊กอิน Angular อื่น ๆ เพื่อให้แน่ใจว่ารหัสในคอนโทรลเลอร์มีความชัดเจนและไม่สับสนเรากำหนดว่า DOM ไม่ได้รับอนุญาตให้ทำงานในคอนโทรลเลอร์ดังนั้นทุกครั้งที่เราจำเป็นต้องใช้งานองค์ประกอบ DOM เราเป็นคำแนะนำในการทำให้เสร็จสมบูรณ์ดังนั้นจึงมีอยู่ ปลั๊กอิน jQuery จำนวนมากต้องถูกแปลงเป็นคำแนะนำในการทำงานซึ่งเป็นสิ่งที่น่าขยะแขยงมาก ดูเหมือนว่าจะออกไปไกลโอเค ~~
สารบัญ:
1. การแนะนำการกำหนดเส้นทาง AngularJS
2. อินสแตนซ์การกำหนดเส้นทาง AngularJS
3. AngularJS ใช้การกำหนดเส้นทางโหมด HTML5 รวมกับการเปลี่ยนเส้นทางเว็บเซิร์ฟเวอร์เพื่อทำให้ที่อยู่เส้นทางง่ายขึ้น
1. การแนะนำการกำหนดเส้นทาง AngularJS
การกำหนดเส้นทาง AngularJS นั้นแตกต่างจากการกำหนดเส้นทาง MVC แบ็กเอนด์ การกำหนดเส้นทางส่วนหน้าของ AngularJS ต้องมีการกำหนดกฎการกำหนดเส้นทาง (RoutEprovider) สำหรับการระบุ (NG-APP) ที่ระบุล่วงหน้าในหน้าเทมเพลตจากนั้นบอก (NG-APP) หน้า (HTML) เพื่อโหลดผ่าน URL ที่แตกต่างกัน การกำหนดเส้นทาง MVC คือการขอการดำเนินการของคอนโทรลเลอร์ผ่านคำขอ URL ที่แตกต่างกันจากนั้นส่งคืนมุมมองตามกฎการกำหนดเส้นทาง AngularJS เป็นเส้นทางส่วนหน้าบริสุทธิ์ ในภายหลังเราจะรวมไฟล์การกำหนดค่าเพื่อลดความซับซ้อนของที่อยู่เส้นทาง
2. อินสแตนซ์การกำหนดเส้นทาง AngularJS
เราสร้างไฟล์ JS ใหม่ที่นี่ฉันตั้งชื่อมัน app.js และเราเขียนรหัสต่อไปนี้ในไฟล์:
1 angular.module ("แอป", [2 'ngroute' 3]) 4 .config (['$ routeProvider', ฟังก์ชั่น ($ routeProvider) {5 $ routeProvider.when ("/list", {6 เทมเพลต: "นี่คือหน้า "/list" 12}) 13}])
เราสร้างไฟล์ HTML ใหม่และตั้งชื่อมัน index.html รหัสและคำอธิบายมีดังนี้:
1 <! doctype html> 2 <html xmlns = "http://www.w3.org/1999/xhtml" ng-app = "app"> 3 <head> 4 <title> </title> 5 </head> 6 <body> 7 <header> 8 <h2> ng-view> </div> 12 </sentive> 13 <fooster> 14 <H3> นี่คือด้านล่าง </h3> 15 </footer> 16 </body> 17 </html> 18 <สคริปต์ src = "/สคริปต์/เชิงมุม/Angular.min.js"> </script> src = "/scripts/angular-route/angular-route.min.js"> </script> 20 <script src = "/scripts/app.js"> </script>
เรียกใช้ตัวอย่างเอฟเฟกต์มีดังนี้
เปิดที่อยู่อินพุตของเบราว์เซอร์: http: // localhost: 2987/index.html#/รายละเอียดและ http: // localhost: 2987/index.html#/รายการตามลำดับคุณสามารถดูหน้าเว็บที่แสดงในรูปต่อไปนี้:
3. AngularJS ใช้การกำหนดเส้นทางโหมด HTML5 รวมกับเว็บเซิร์ฟเวอร์เพื่อทำให้ที่อยู่เส้นทางง่ายขึ้น
ในภาพด้านบนเราจะเห็นว่าที่อยู่คำขอยาวมาก มันเป็นเรื่องยากสำหรับฉันที่มีความผิดปกติที่ครอบงำด้วยการยอมรับที่อยู่ประเภทนี้ดังนั้นฉันจึงตัดสินใจที่จะทำการเปลี่ยนแปลงเช่นนี้:
1) Angulajs เปิดใช้งานการกำหนดเส้นทางโหมด HTML5 และลบหมายเลข #:
สำหรับ Angulajs ค่าเริ่มต้นคือโหมดการกำหนดเส้นทาง HTML5 ไม่ได้เปิด เราเปิดใช้งานโหมดการกำหนดเส้นทาง HTML5 โดยทำตามวิธีการต่อไปนี้:
1 angular.module ("แอพ", [2 'ngroute' 3]) 4 .config (['$ routeProvider', '$ locationProvider', ฟังก์ชั่น ($ routeProvider, $ locationprovider) {5 // เปิด html5 โหมดการกำหนดเส้นทาง 6 $ หน้า "9}) เมื่อ ("/รายละเอียด ", {10 เทมเพลต:" นี่คือรายละเอียดหน้า "11}) 12. otherwise ({13 redirectto:" /404.html"14}) 15}]))))))))
ด้วยวิธีนี้หลังจากลบหมายเลข # ตามที่อยู่คำขอด้านบนหน้าจะถูกรีเฟรช พรอมต์ 404 ไม่พบหน้าเว็บ เหตุผลก็คือหากมีการร้องขอที่อยู่ดังกล่าวไปยังพื้นหลัง IIS ไฟล์ที่เกี่ยวข้องจะไม่พบดังนั้นหน้าข้อผิดพลาด 404 จะถูกส่งคืนโดยตรง ดังนั้นเราจำเป็นต้องเพิ่มการกำหนดค่าเว็บเซิร์ฟเวอร์ลงในไฟล์การกำหนดค่าและเปลี่ยนเส้นทางไฟล์ดังนี้:
1 <System.webServer> 2 <Rewrite> 3 <RULES> 4 <RULE NAME = "NAME"> 5 <MATCHE URL = "^LIST | รายละเอียด*" ความไม่รู้ = "true"/> 6 <เงื่อนไข logicalGrouping = "matchall"> 7 <เพิ่มอินพุต = "{request_filename} matchType = "isDirectory" negate = "true"/> 9 </เงื่อนไข> 10 <action type = "rewrite" url = "/index.html"/> 11 </rule> 12 </rules> 13 </srewrite> 14 </system.webserver>
ดังที่แสดงในรหัสข้างต้น <match url = "^list | รายละเอียด*" ไม่รู้ = "จริง"/> หมายความว่าหากที่อยู่คำขอมีรายการหรือรายละเอียด (เขียนนิพจน์ทั่วไปตามข้อกำหนด) มันจะถูกเปลี่ยนเส้นทางไปยังหน้า index.html เมื่อเข้าสู่ http: // localhost: 2987/รายละเอียดบนหน้า, IIS จะกลับไปที่หน้าเทมเพลตก่อน (index.html) ก่อนจากนั้นเส้นทาง Angulajs จะเริ่มดำเนินการ
ป้อน http: // localhost: 2987/รายละเอียดในเบราว์เซอร์และพบว่าเราไม่ได้รับผลลัพธ์ที่เราต้องการนั่นคือเส้นทางไม่ตรงกัน
หลังจากค้นหาออนไลน์เป็นเวลานานในที่สุดฉันก็พบวิธีแก้ปัญหาซึ่งก็คือการเพิ่มแท็ก <aSe> ลงในหน้า HTML ดังนี้:
1 <! doctype html> 2 <html xmlns = "http://www.w3.org/1999/xhtml" ng-app = "app"> 3 <head> 4 <title> </title> 5 <base href = "/"/> 6 </header> 11 <ented> 12 <div ng-view> </div> 13 </เนื้อหา> 14 <Footer> 15 <H3> นี่คือด้านล่าง </h3> 16 </fooster> 17 </body> 18 </html> 19 <script src = "/scripts/angular/angular.min.js" src = "/scripts/angular-route/angular-route.min.js"> </script> 21 <script src = "/scripts/app.js"> </script>
ด้วยวิธีนี้ป้อน: http: // localhost: 2987/รายละเอียดบนเบราว์เซอร์และคุณจะเห็นผลลัพธ์ที่เราต้องการ ภาพหน้าจอมีดังนี้:
คำถามมรดก: ทำไมคุณถึงประสบความสำเร็จได้โดยเพิ่มแท็ก <base href = " /" />? ฉันอยากจะถามบล็อกเกอร์ทั้งหมดเกี่ยวกับคำถามนี้
หากมีอะไรผิดปกติกับเนื้อหาข้างต้นโปรดบ่นเกี่ยวกับเรื่องนี้! - -
ข้างต้นเป็นเนื้อหาเต็มรูปแบบของการกำหนดเส้นทาง AngularJS และตัวอย่างเทมเพลตและวิธีการทำให้การกำหนดเส้นทางการกำหนดเส้นทาง (ต้องอ่าน) นำเสนอโดยตัวแก้ไข ฉันหวังว่าทุกคนจะสนับสนุน wulin.com เพิ่มเติม ~