การใช้การกำหนดเส้นทาง AngularJS กับเว็บแอปหน้าเดียว

ฉันอ่านเกี่ยวกับ การกำหนดเส้นทาง ของ AngularJS ฉันต้องการนำไปใช้ในเว็บแอปของฉัน แต่น่าเสียดายที่ฉันมีสถานการณ์ที่ค่อนข้างยากในการเปลี่ยนเส้นทางในตอนนี้ฉันคิดว่า นี่คือวิธีที่แอปของฉันทำงานตอนนี้ (และฉันรู้ว่ามันอาจจะไม่ใช่วิธีที่ควร แต่ใช้งานได้):

ฉันมีคอนโทรลเลอร์ตัวเดียวสำหรับทั้งแอป มุมมองถูกสร้างขึ้นด้วย div บางตัว หนึ่งในนั้นคือ div เมนู มุมมองอื่น ๆ เป็นมุมมอง 'บางส่วน' เนื่องจาก Angularjs เรียกพวกเขาว่าฉันเดา แต่ปัญหาที่ฉันเห็นที่นี่คือมุมมองบางส่วนของฉันสองรายการสามารถแสดงพร้อมกันได้ (เพจถูกสร้างขึ้นในลักษณะนี้ มุมมองบางส่วนจะใช้เพียงส่วนหนึ่งของเพจเท่านั้น)

ดังนั้นสิ่งที่ฉันทำคือ: ฉันคลิกปุ่มบนเมนู -> มุมมองบางส่วนปรากฏขึ้น (ng-show) จากนั้นฉันสามารถคลิกบางอย่างในมุมมองบางส่วนนี้เพื่อเปิดมุมมองบางส่วนที่สองในหน้าเดียวกัน (เมนูและ ส่วนแรกจะต้องคงอยู่เหมือนเดิม)

ในขณะนี้ ฉันรวมบางส่วนไว้ภายใน div บางส่วนด้วย php include (ซึ่งฉันแน่ใจว่าผิดทาง) และ div มี ng-show อยู่ ดังนั้นจึงไม่มีสิ่งใดปรากฏที่จุดเริ่มต้น จากนั้นฉันจัดการการคลิกทั้งหมดในเมนูด้วยการตั้งค่าพารามิเตอร์ ng-show ของบางส่วน (มุมมอง) ทั้งหมดของฉัน ดังนั้นหากคลิกปุ่มใดปุ่มหนึ่ง ฉันจะซ่อนปุ่มอื่นๆ ทั้งหมด (ด้วย ng-click และฟังก์ชันภายในคอนโทรลเลอร์) แต่นี่เป็นงานที่น่าเบื่อและไม่ใช่วิธี เชิงมุมJS และนั่นคือสาเหตุที่ฉันถามคำถามนี้ที่นี่

ตัวอย่างของการรวมบางส่วนของฉัน (ถอดคลาส css ที่ไม่จำเป็นทั้งหมดออก ฯลฯ ):

<div ng-show="showNames">
    <?php include_once("views/AREA1/names.php") ?>  
</div>

และ Names.php มีองค์ประกอบเพียงไม่กี่องค์ประกอบที่มีคำสั่ง ng-repeat และคำสั่ง เชิงมุมJS อื่นๆ... ฉันมีการรวมหลายอย่างเช่นนั้นและพวกมันทำงานกับการจัดการ ng-show ได้เป็นอย่างดี แต่ตอนนี้เมื่อฉันเข้าใจแนวคิด AngularJS บางอย่างแล้ว ฉันพบว่าฉันทำผิดพลาด...

เพื่อสรุป: ฉันจะใช้เส้นทาง angularJS ได้อย่างไร (อาจใช้ ng-view ก็ได้ - ไม่จำเป็น) เพื่อแสดงมุมมองภายในเว็บแอปของฉัน (โดยคำนึงถึงสถานการณ์ที่ผมได้อธิบายไว้ข้างต้น) ฉันแค่อยากให้ผู้ใช้สามารถรู้ว่าเขาอยู่ใน "ส่วนหนึ่งของหน้า" ใดในขณะใดก็ตาม

แก้ไข: ฉันเข้าไปดู สิ่งนี้ และฉันคิดว่าฉันสามารถแก้ไขได้: ฉันต้องการโครงสร้างที่คล้ายกับโครงสร้างในตัวอย่างนี้ 2.1 การสาธิตออนไลน์ แต่ยิ่งกว่านั้น ฉันยังต้องสามารถคลิกบางอย่างบน ng-view ซึ่งควร เปิดอีกมุมมองหนึ่ง (อันแรกควรอยู่กับที่) มีความคิดใด ๆ ว่าจะทำสิ่งนี้ให้สำเร็จได้อย่างไร?


person trainoasis    schedule 13.02.2014    source แหล่งที่มา


คำตอบ (2)


ด้วยการใช้คุณลักษณะ routing ใน AngularJS เนื้อหา html ของ ng-view จะถูกแทนที่ด้วยบางส่วนใหม่ทั้งหมด คุณไม่ควรใช้ ng-view เพื่อจุดประสงค์เช่น การแสดงหลายส่วนพร้อมกัน

แต่คุณสามารถคิดผสม ng-view และ ng-include ได้

สมมติว่าเราคลิกแต่ละรายการบนเมนู ng-view เปลี่ยนส่วนย่อย คุณสามารถมี ng-include ในส่วนย่อยของคุณ ซึ่งเราทำทั้งหมดได้ที่นี่เหมือนกับส่วนย่อยย่อย

ลองอ่าน ng-include

person Howard    schedule 13.02.2014
comment
หืมลอง ng-include แต่มันสร้าง $scope ใหม่และทำให้เกิดปัญหามากกว่าที่จะแก้ไขได้? - person trainoasis; 20.02.2014
comment
ขออภัย มันอาจจะตอบคุณช้า นี่คือตัวอย่าง Plunker จากฉัน แสดงวิธีใช้ ng-include เพื่อนำหน้าย่อยเข้ามา plnkr .co/edit/bvr6764VR3Iq8AUO1Urh?p=info - person Howard; 25.02.2014
comment
และใช่ ng-include จะสร้าง scope ใหม่ คุณประสบปัญหาอะไร? ดีกว่าที่จะให้ plunker จากนั้นเราก็สามารถแก้ไขปัญหาตามกรณีจริงได้ - person Howard; 26.02.2014

AngularJS มี ng-view ซึ่งจะมีธีมหลักของบริบทปัจจุบัน องค์ประกอบ UI ที่เหลือทั้งหมดได้รับการจัดการโดย ng-include เส้นทางยังทำงานซิงค์กับ nv-view อีกด้วย

หากข้อกำหนดในการดูของคุณซับซ้อน โปรดดูส่วนประกอบ ui-router ที่รองรับการผสมผสานที่หลากหลาย

person Chandermani    schedule 13.02.2014
comment
อืม นั่นดูค่อนข้างซับซ้อน Ng-include สร้าง $scope ใหม่และนั่นทำให้ฉันรำคาญเล็กน้อย ฉันยังไม่รู้วิธีเริ่มใช้งานการกำหนดเส้นทางในแอปของฉัน - person trainoasis; 20.02.2014
comment
ภายในบางส่วนของคุณที่แสดงผลใน ng-view คุณสามารถเพิ่มส่วนที่ถูกซ่อนไว้โดยค่าเริ่มต้นและแสดงตามการคลิกได้ตลอดเวลา คุณสามารถใช้ ng-if หรือ ng-show\hide เพื่อทำสิ่งนี้ - person Chandermani; 21.02.2014
comment
แต่ฉันไม่มี URL ที่กำหนดเองสำหรับหน้าย่อยที่ถูกคลิกเหล่านี้ ซึ่งฉันต้องการหากฉันต้องการกำหนดเส้นทาง ในขณะนี้ ฉันมี ng-show/hide เพื่อจัดการทั้งหน้า ซึ่งใช้ได้ดี - สิ่งเดียวคือฉันไม่สามารถไปที่หน้าบางหน้าด้วย url ได้ แต่เพียงคลิกเพื่อไปที่นั่นเท่านั้น - person trainoasis; 21.02.2014
comment
ใช่ และนั่นคือเหตุผลที่ฉันขอให้คุณตรวจสอบ ui-router อีกคนหนึ่งคิดว่าฉันสามารถแนะนำได้คือการใช้สตริงการสืบค้นกับเส้นทางสำหรับมุมมองย่อย ในกรณีนี้ คุณสามารถตั้งค่า reloadOnSearch ในการรวบรวมเส้นทาง $routeProvider เป็น false สิ่งที่จะเกิดขึ้นคือมุมมองหลักจะไม่ถูกสลับออก และคุณจะได้รับพารามิเตอร์เพิ่มเติมจาก URL - person Chandermani; 21.02.2014
comment
ฉันไม่อยากใช้ ui-router เนื่องจากมันควรจะอยู่ในขั้นตอนการพัฒนาที่หนักหน่วง และไม่ใช่สำหรับการใช้งานจริง (น่าเสียดาย)… ไม่ว่าในกรณีใด ฉันเห็นว่าฉันมีสถานการณ์ที่ค่อนข้างยากที่นี่ เอ๊ะ ขอบคุณสำหรับคำตอบ ฉันจะพยายามค้นคว้าเพิ่มเติม - person trainoasis; 21.02.2014