AngularJS Directive เทียบกับ Service vs Controller


15

ฉันกำลังจะเริ่มดำเนินการตามคำขอเปลี่ยนแปลงในเว็บไซต์ภายใน บริษัท ของฉันซึ่งจะตรวจสอบฟิลด์จำนวนมากและเน้นพวกเขาหากพวกเขาตรงกับหลักเกณฑ์บางอย่าง ตัวอย่างเช่นหากวันเกิดคือวันนี้ฟิลด์นั้นจะถูกระบุไว้และคำแนะนำเครื่องมือจะพูดว่า "ขอให้พวกเขามีความสุขในวันเกิด!"

รายละเอียดขอให้โหลดสิ่งนี้หลังจากที่ส่วนอื่น ๆ ของหน้าถูกสร้างการแสดงผลดังนั้นมันจะไม่เพิ่มความเร็วในการโหลด เนื่องจากฉันใหม่กับ angularJS ฉันไม่แน่ใจว่าวิธีการ 'ถูกต้อง' ที่ควรทำ

ปัญหาที่พบ:

เนื่องจากสิ่งนี้รวมถึงการเพิ่มเส้นขอบและรูปภาพและแอตทริบิวต์ของชื่อเรื่อง (การจัดการ DOM) ดูเหมือนว่าฉันควรใช้คำสั่ง

อย่างไรก็ตามสิ่งนี้จะไม่สามารถใช้ซ้ำได้หรือสั้นเหมือนคำสั่งส่วนใหญ่

ข้อมูลครึ่งหนึ่งที่ฉันต้องตรวจสอบจะถูกส่งคืนในการโทรดั้งเดิมเมื่อโหลดหน้าเว็บดังนั้นฉันจึงต้องการบันทึกและไม่เสียสายอีกครั้งที่จะได้รับอีกครั้งซึ่งทำให้ฉันคิดว่าบริการจะดีสำหรับการจัดเก็บข้อมูลทั้งหมด

ฉันรู้วิธีการทำสิ่งนี้ทั้งหมดในคอนโทรลเลอร์ แต่นั่นคือรหัสที่ไม่ดี: P

ความคิดใด ๆ เกี่ยวกับวิธีที่ดีที่สุดที่สามารถทำได้? โดยทั่วไปฉันจะต้องมีการโทร http เพื่อตรวจสอบข้อมูลทั้งหมดซึ่งจะส่งคืนวัตถุที่มีค่าบูลสำหรับ 'โทรออก' แต่ละประเภทที่ฉันต้องทำ จากนั้นฉันจะเรียกใช้รายการนี้และถ้าค่าเป็นจริงให้เพิ่มเส้นขอบรูปภาพและข้อความคำแนะนำเครื่องมือ

ฉันไม่แน่ใจว่าคำถามนี้ชัดเจนเพียงพอหรือไม่ถ้าคุณต้องการให้ฉันเพิ่มรายละเอียดโปรดถาม ขอขอบคุณ!


1
ทำไมคุณต้องใช้ 1 ใน 3 เท่านั้น? ดูเหมือนว่าฉันจะรวมกันอย่างน้อยคำสั่งและบริการ / ตัวควบคุมจะดีที่สุดที่นี่
Pete

การรวมกันก็ดีเช่นกันฉันแค่สับสนว่ามันควรจะทำงานยังไง
Bobo

ขออภัยที่อยู่ในความคิดเห็นไม่มีเวลาสำหรับคำตอบที่เหมาะสม การโทรไปหาข้อมูลอาจอยู่ในบริการ บริการนั้นควรถูกฉีดเข้าไปยังคอนโทรลเลอร์ของคุณ หากคุณต้องการให้ตรรกะใด ๆ กับมุมมองสำหรับข้อมูลนั้นจะไปในตัวควบคุม ในที่สุดมุมมองของคุณควรใช้คำสั่งของคุณที่สามารถใช้ตรรกะใด ๆ ที่คุณอาจได้สัมผัสในตัวควบคุม
Pete

คำตอบ:


27

คุณพูดถูกมีตัวเลือกมากมายในการเล่น

คอนโทรลเลอร์เป็นสถานที่ที่ดีในการเริ่มเขียนสิ่งใหม่ ๆ ในเชิงมุม การใช้คอนโทรลเลอร์กับชิ้นส่วนของมาร์กอัปช่วยให้คุณใช้ไลบรารีของคำสั่งที่มีอยู่แล้วของแองกูลาร์กับบริการที่มีอยู่ของแองกูลาร์ได้

หลังจากใช้เวลาไม่นานกับสิ่งนี้คุณจะตระหนักได้ว่าคอนโทรลเลอร์ของคุณมีขนาดใหญ่เกินไป ตอนนี้ถึงเวลาที่จะ refactor นี่คือแนวทางทั่วไปที่ฉันมักจะทำตาม

  • ตัวควบคุม: ตัวควบคุมจะแนบและจัดการค่า / ฟังก์ชันที่เชื่อมโยงกับ $ scope ในท้ายที่สุด $ ขอบเขตมีแนวโน้มที่จะหนักนำเสนอการขับเคลื่อน IE มันเป็นรูปแบบมุมมอง
  • บริการ: บริการมีแนวโน้มที่จะผูกในโครงสร้างพื้นฐานแบ็กเอนด์หรือคุณสมบัติของเบราว์เซอร์อื่น ๆ
  • คำสั่ง: คำสั่งอนุญาตให้คุณทำงานร่วมกับ DOM events / function ที่ไม่ได้จัดการโดยตัวจัดการที่มีอยู่

ดังนั้นคุณจะต้องกดรหัสในสามทิศทาง:

  1. รหัสจากตัวควบคุมของฉันคือจริงๆเหตุผลชิ้นส่วนของข้อมูลนำเสนอ / ตรรกะอีกและควรจะแยกออกเป็นตัวควบคุมอื่น หมายเหตุเมื่อทำงานกับรายการที่อยู่ในขอบเขต $ จะเป็นการดีที่สุดที่จะแยกชิ้นส่วนที่ผู้ควบคุมแต่ละคนรับผิดชอบในวัตถุของตัวเองในขอบเขต $ ตัวอย่างเช่น $ scope.creditCard [blah] สำหรับคอนโทรลเลอร์หนึ่งตัวเทียบกับ $ scope.billingAddress [blah] สำหรับคอนโทรลเลอร์อื่น สิ่งนี้จะช่วยป้องกันปัญหาเกี่ยวกับการใช้การสืบทอดต้นแบบของเชิงมุมในขอบเขต $

  2. รหัสจากคอนโทรลเลอร์ของฉันเป็นส่วนหนึ่งของโครงสร้างพื้นฐานแอปพลิเคชันหรือรหัสยูทิลิตี้ที่อาจต้องแชร์ผ่านแอพและควรแยกออกเป็นบริการ

  3. รหัสจากคอนโทรลเลอร์ของฉันเกี่ยวข้องอย่างมากกับการนำเสนอ / องค์กร DOM และดังนั้นจึงควรแยกออกเป็นคำสั่งของตัวเอง

ตัวอย่างของ 1. อาจเป็นการจัดการการป้อน / ตรวจสอบบัตรเครดิตแยกจากส่วนที่เหลือของแบบฟอร์มการชำระเงิน คุณจะมีตรรกะของบัตรเครดิตในตัวควบคุมแยกต่างหากจากตรรกะเพื่อให้ผู้ใช้ป้อนที่อยู่ดังนั้นพวกเขาจะแยกตัวควบคุมเชิงตรรกะ

ตัวอย่างของ 2 อาจจะย้ายส่วนที่สื่อสารกับบริการแบ็กเอนด์บัตรเครดิตเพื่อยอมรับ / ปฏิเสธการชำระเงิน หรือตัวอย่างอื่นอาจเป็นโมดูลที่พูดถึงส่วนหลังเพื่อจัดการ API การสร้างผู้ใช้

ตัวอย่างของ 3 อาจเป็นการสร้างฟังก์ชันแท็บอัตโนมัติบางอย่างที่เลื่อนเคอร์เซอร์ระหว่างกล่องแก้ไข 4 ตัวหลังจากป้อนหมายเลข 4 สำหรับบัตรเครดิต

แยกแอปของคุณตามนั้น


สิ่งนี้ช่วยให้ฉันเข้าใจเกี่ยวกับเชิงมุมมากขึ้น ขอบคุณมาก :)
Bobo
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.