ในการเรียนรู้ที่จะใช้เชิงมุม UI-Route เป็นหนึ่งในปัญหา ไม่มีปัญหากับการใช้งานง่าย ๆ แต่เมื่อพูดถึงการทำรังหลายระดับฉันรู้สึกสับสน ฉันค้นหาข้อมูลจำนวนมากและก้าวไปสู่ข้อผิดพลาดมากมาย จนถึงตอนนี้ฉันไม่สามารถพูดได้ว่าฉันมีความเข้าใจที่ครอบคลุมเกี่ยวกับ UI-Route; ที่นี่ฉันเพิ่งบันทึกไม่กี่หลุมที่ฉันกรอก
1. การใช้บทคัดย่อ:
$ stateprovider .state ('Shop', {Resolve: {"Shoplist": function ($ http) {return $ http ({url: "/bookapp/data/shoplist.php", วิธี: "get"}) คอนโทรลเลอร์: "ShopListController"})การใช้แอตทริบิวต์นามธรรมคืออะไร? คำอธิบายอย่างเป็นทางการ: บทคัดย่อ: จริงระบุว่าสถานะนี้ไม่สามารถเปิดใช้งานได้อย่างชัดเจนและสามารถเปิดใช้งานได้โดยปริยายโดยรัฐย่อยเท่านั้น หากคุณไม่สามารถเปิดใช้งานได้อย่างชัดเจนคุณไม่สามารถเข้าถึงเส้นทางสถานะนี้ได้โดยตรงผ่าน "/Shop" นั่นไม่ใช่จุดจบ? ประเด็นของการทำคืออะไร? เดี๋ยวก่อนมาดูประโยคถัดไป: มันสามารถเปิดใช้งานได้อย่างซ่อนเร้นในสถานะผ้าห่มและดูเหมือนว่ามันจะยังมีชีวิตอยู่ มันจะทำให้มันมีชีวิตอยู่ได้อย่างไร? มาดูรหัสต่อไปนี้:
. State ('Shop.main', {url: "/: id", บทคัดย่อ: จริง, templateurl: "เทมเพลต/ร้านค้า/main2.html", คอนโทรลเลอร์: "ShopMainController"})รัฐ : "Shop.main" เป็นแหล่งเก็บของ ตามทฤษฎีร้านค้าสามารถเปิดใช้งานร้านค้าได้ เราจำเป็นต้องเข้าถึง: /shop /1 เพื่อให้เราสามารถเปิดใช้งานสถานะร้านค้าและ "shop.main"
อย่ารีบร้อน ฉันจะเพิ่มแอตทริบิวต์นามธรรมเพื่อเล่นกับสิ่งที่น่าตื่นเต้น มาดูรหัสต่อไปนี้ในระดับถัดไป:
.state ('shop.main.info', {url: "", templateurl: "แม่แบบ/ร้านค้า/info.html", แคช: 'เท็จ', คอนโทรลเลอร์: "infocontroller"}) .state ('main.author' .state ('Shop.main.samebook', {url: "SameBook", เทมเพลต: "<div> SamebooksameBooksameBookSamebook </div>"})ฉันเห็นว่ารัฐ "shop.main.info" มี URL ของรัฐ "" "ดังนั้นเราจึงต้องเข้าถึง" ร้านค้า/1 "ด้วยวิธีนี้ทั้งหมดที่ใช้ย่อยเริ่มต้นทั้งหมดที่สามารถใช้เป็น" shop.main "
ในเวลานี้ความสัมพันธ์ในการทำรังของโมดูลคือ: list.html ซ้อนกัน main.html, main.html nested info.html เราสามารถเปิดใช้งานการทำรังสามชั้นนี้ผ่าน URL ของ "Shop/: ID"
2. การใช้พารามิเตอร์ในคอนโทรลเลอร์:
ไม่มีปัญหาในเรื่องนี้ ฉีดพารามิเตอร์ URL "$ stateparams" ลงในคอนโทรลเลอร์และคุณสามารถรับได้ในวัตถุนี้:
Shop.controller ("ShopMainController", ['$ scope', '$ stateparams', '$ rootscope', ฟังก์ชั่น ($ scope, $ stateparams, $ rootscope) {$ scope.persons = [1,2,3,4,5,6]; $ cfploadingbar.start ();}]);3. วิธีป้องกันแคชแม่แบบ
ในระหว่างกระบวนการพัฒนาแคชแม่แบบส่งผลกระทบอย่างรุนแรงต่อการดีบักของเรา บางครั้งรหัสได้รับการแก้ไข แต่เทมเพลตไม่เปลี่ยนแปลงเลย มันน่าวิตกมาก เราเพียงแค่ต้องฟัง statechangesuccess แล้วล้าง $ templatecache ที่นี่เราใช้วิธีการเรียกใช้เพื่อเพิ่มผู้ฟัง:
bookapp.run (['$ rootscope', '$ templatecache', ฟังก์ชั่น ($ rootscope, $ templatecache) {var statechangesuccess = $ rootscope. $ on ('statechangesuccess', astechangesuccess)ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน