AngularJS: ngInclude เทียบกับคำสั่ง

ฉันไม่ค่อยเข้าใจว่าควรใช้คำสั่งเมื่อใดและเมื่อใดจึงจะเหมาะสมกว่าที่จะใช้ nginclude ลองดูตัวอย่างนี้: ฉันมีบางส่วนpassword-and-confirm-input-fields.htmlนั่นคือ html สำหรับป้อนและยืนยันรหัสผ่าน ฉันใช้ทั้งในหน้าสมัครและภายใต้หน้าการเปลี่ยนแปลงรหัสผ่าน ทั้งสองเพจมีคอนโทรลเลอร์แต่ละหน้า html บางส่วนไม่มีคอนโทรลเลอร์เฉพาะ

ฉันควรใช้คำสั่งหรือngIncludeเพื่อสิ่งนี้?

ทุกอย่างขึ้นอยู่กับสิ่งที่คุณต้องการจากส่วนรหัสของคุณ ส่วนตัวถ้ารหัสไม่ได้มีเหตุผลใด ๆ ngIncludeหรือไม่จำเป็นต้องควบคุมแล้วฉันจะไปกับ โดยปกติฉันจะใส่ส่วน html แบบ "คงที่" จำนวนมากขึ้นซึ่งฉันไม่ต้องการให้เกะกะมุมมองที่นี่ (เช่น: สมมติว่าเป็นตารางขนาดใหญ่ที่มีข้อมูลมาจากตัวควบคุมหลักอย่างไรก็ตามมันสะอาด<div ng-include="bigtable.html" />กว่าที่จะมีบรรทัดทั้งหมดที่เกะกะ View)

หากมีตรรกะการปรับแต่ง DOM หรือคุณต้องการให้ปรับแต่งได้ (หรือที่เรียกว่าแสดงผลต่างกัน) ในกรณีต่างๆที่ใช้ก็directivesเป็นทางเลือกที่ดีกว่า (ตอนแรกมันน่ากลัว แต่ก็ทรงพลังมากให้เวลา) .

ngInclude

บางครั้งคุณจะเห็นngInclude'sว่าได้รับผลกระทบจากภายนอกของพวกเขา/$scope interfaceเช่นทวนขนาดใหญ่ / ซับซ้อนให้พูด อินเทอร์เฟซทั้ง 2 นี้เชื่อมโยงเข้าด้วยกันด้วยเหตุนี้ หากมีบางอย่างในการ$scopeเปลี่ยนแปลงหลักคุณต้องแก้ไข / เปลี่ยนตรรกะของคุณภายในบางส่วนที่รวมไว้

คำสั่ง

ในทางกลับกันคำสั่งอาจมีขอบเขต / ตัวควบคุมที่ชัดเจน / ฯลฯ ดังนั้นหากคุณกำลังคิดถึงสถานการณ์ที่คุณต้องใช้บางสิ่งหลาย ๆ ครั้งคุณจะเห็นได้ว่าการเชื่อมต่อขอบเขตของตัวเองจะทำให้ชีวิตง่ายขึ้นและน้อยลงได้อย่างไร สับสน

นอกจากนี้เมื่อใดก็ตามที่คุณกำลังจะโต้ตอบกับ DOM เลยคุณควรใช้คำสั่ง สิ่งนี้ทำให้การทดสอบดีขึ้นและแยกการกระทำเหล่านี้ออกจากตัวควบคุม / บริการ / ฯลฯ ซึ่งเป็นสิ่งที่คุณต้องการ!

เคล็ดลับ:ให้แน่ใจว่าไม่ใช้ จำกัด : 'E' ถ้าคุณดูแลเกี่ยวกับ IE8! มีวิธีรอบนี้ แต่มันน่ารำคาญ แค่ทำให้ชีวิตง่ายขึ้นและยึดติดกับแอตทริบิวต์ / etc<div my-directive />

ส่วนประกอบ [Update 3/1/2559]

ที่เพิ่มเข้ามาในเชิงมุม 1.5 .directve()มันเป็นหลักรอบเสื้อคลุม ควรใช้ส่วนประกอบเกือบตลอดเวลา restrict: 'E', scope : {}, bindToController: trueมันเอามากรหัสสั่งสำเร็จรูปโดยผิดนัดสิ่งที่ต้องการ ขอแนะนำให้ใช้สิ่งเหล่านี้กับเกือบทุกอย่างในแอปของคุณเพื่อให้สามารถเปลี่ยนไปใช้ Angular2 ได้ง่ายขึ้น

สรุปแล้ว:

คุณควรจะสร้างComponents & Directivesเป็นส่วนใหญ่

• ขยายได้มากขึ้น
• คุณสามารถเทมเพลตและมีไฟล์ของคุณอยู่ภายนอก (เช่น ngInclude)
• คุณสามารถเลือกใช้ขอบเขตหลักหรือขอบเขตแยกของตัวเองภายในคำสั่ง
• ใช้ซ้ำได้ดีขึ้นตลอดทั้งแอปพลิเคชันของคุณ

ปรับปรุง 3/1/2559

ตอนนี้ Angular 2 กำลังรวมตัวกันอย่างช้าๆและเรารู้รูปแบบทั่วไปแล้ว (แน่นอนว่าจะยังคงมีการเปลี่ยนแปลงอยู่ที่นี่และที่นั่น) เพียงแค่ต้องการเพิ่มความสำคัญที่ต้องทำcomponents(บางครั้งก็เป็นคำสั่งหากคุณต้องการให้ จำกัด E ')

ส่วนประกอบคล้ายกับ Angular 2 @Componentมาก ด้วยวิธีนี้เรากำลังห่อหุ้มลอจิก & html ในพื้นที่เดียวกัน

ตรวจสอบให้แน่ใจว่าคุณห่อหุ้มสิ่งต่างๆไว้ในส่วนประกอบให้มากที่สุดเท่าที่จะทำได้ซึ่งจะทำให้การเปลี่ยนไปใช้ Angular 2 นั้นง่ายขึ้นมาก! (หากคุณเลือกที่จะทำการเปลี่ยนแปลง)

นี่เป็นบทความที่ดีที่อธิบายกระบวนการย้ายข้อมูลนี้โดยใช้directives(คล้ายกันมากหากคุณจะใช้ส่วนประกอบของหลักสูตร): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/