สำหรับใครที่พึ่งเริ่มต้นสามารถติดตามโค้ดได้ที่ Github

สำหรับตอนนี้ จะเป็นจุดเริ่มต้นในการ refactoring เนื่องจากที่ผ่านๆมา เราเขียนทุกอย่างไว้ภายใน AppComponent ไม่ว่าจะเป็นการแสดงรายการฮีโร่ ไปจนถึงการแสดงรายละเอียด โค้ดที่มั่วๆแบบนี้ จะทำให้การพัฒนาต่อเป็นไปได้ยาก ดังนั้น flow การทำงานที่ดี จึงจำเป็นต้องมีการ refactoring เพื่อปรับปรุง แยกโค้ดแต่ละส่วนออกจากกัน ทำให้มันเป็นระบบมากขึ้น

ไม่จำเป็นต้อง design ให้ระบบสมบูรณ์ตั้งแต่แรก แต่ทุกๆที่มีการเพิ่มเติม อย่าลืมที่จะ refactoring เพื่อทำให้ระบบสะอาดอยู่ตลอดเวลา

สิ่งที่เราจะทำในตอนนี้ คือ สร้าง sub-components ที่รับผิดชอบในงานของตัวเอง โดยมี AppComponent เป็นศูนย์กลางควบคุม

Make a hero detail component

สิ่งแรกที่เราจะแยกเป็น component คือ ส่วนแสดงรายละเอียดฮีโร่ เริ่มต้นด้วยการสร้างไฟล์ app/hero-detail.component.ts พร้อมกับสร้าง HeroDetailComponent

ทั้งนี้ angular แนะนำวิธีการตั้งชื่อตัวแปรต่างๆ รวมไปถึงชื่อไฟล์ต่างๆให้ ตามลิงค์ STYLE GUIDE //แปะไว้สำหรับใครที่สนใจตามไปอ่านเพิ่มเติม

โดยองค์ประกอบสำคัญในแต่ละ component มี 3 ส่วนคือ
* import ….
มีไว้สำหรับ import module ต่างๆที่เกี่ยวข้อง โดยในการสร้าง component จะต้องเรียกใช้ class Component จาก @angular/core

* @Component
มีไว้สำหรับ ระบุ Angular metadata (ลักษณะต่างๆ)ที่ใช้อ้างถึงใน html หรือ template

* export class … {}
มีไว้สำหรับ ดูแล logic ต่างๆภายใน component และ export ไปให้ component อื่นๆใช้งาน

ทั้งนี้ สำหรับคนที่คุ้นเคย angular1 จะพบว่า Component ก็คล้ายๆกับ Directive ที่มีโครงสร้างที่เรียบง่ายมากขึ้น

ต่อมา ก็ทำการย้ายโค้ด template จาก AppComponent

แต่ทั้งนี้ พบว่าเรามีการใช้ตัวแปร hero (ที่โดนเปลี่ยนชื่อจาก selectedHero) ภายใน template ดังนั้นเราจึงต้องประกาศตัวแปร hero ไว้ภายใน HeroDetailComponent โดยกำหนดให้ตัวแปร hero มี type Hero

แต่ แต่ แต่ เป็นอีกครั้งที่โค้ดของเราใช้การไม่ได้ เพราะว่า เรามีการอ้างถึง Hero ซึ่งอยู่ภายในไฟล์ app/app.component.ts ดังนั้น เราจึงต้องย้าย class Hero ออกมาเป็น app/hero.ts

ต่อมาก็ import ใส่ไปที่ app/app.component.ts และ app/hero-detail.component.ts

จากนั้นก็ทำการเปลี่ยน template ใน AppComponent ให้เรียกใช้ HeroDetailComponent โดยใช้ <hero-detail> ใส่ [hero]=”selectedHero” เพื่อ binding ตัวแปร selectedHero ใน AppComponent กับ ตัวแปร hero ใน HeroDetailComponent

และก็เป็นอีกครั้งที่โค้ดทุกอย่างมันบึ๊ม เพราะว่า ภายใน template ของ HeroDetailComponent มีการเรียกตัวแปร hero ที่มาจากการ binding แล้วนำไปใช้กับในส่วนที่เป็น form ทำให้ angular ปฏิเสธการ binding นั้น

เพื่อไม่ให้ angular ปฏิเสธการ binding เราต้องทำการระบุให้ชัดเจนว่า ตัวแปร hero ใน HeroDetailComponent เป็นตัวแปรสำหรับ input (อารมณ์เหมือนเป็น monad ใน Haskell)

และท้ายที่สุดจริงๆ คือ การเรียกใช้ HeroDetailComponent ภายใน AppModule เพื่อให้แต่ละ Component แต่ละส่วนรู้จักกันละกัน

เห็นได้ชัดเจนว่า การ refactoring ไม่ได้แก้ไข behavior ของ application สิ่งที่เราทำ คือ การเปลี่ยนแปลง internal structure เพื่อให้ระบบมีความง่ายขึ้น

* ลดความซับซ้อนของ AppComponent โดยการลดภาระความรับผิดชอบไปยัง Component อื่น

* การสร้าง HeroDetailComponent ทำให้เราสามารถแก้ไข form ของฮีโร่ได้โดยไม่ต้องเปลี่ยนแปลงโค้ดส่วนอื่นๆ

* สามารถเพิ่ม feature อื่นๆได้ โดยไม่มีผลกระทบกับ HeroDetailComponent

* เราสามารถนำ HeroDetailComponent ไปใช้ซ้ำๆใน template อื่นๆได้

ดังนั้น แค่การย้ายโค้ดแค่นี้ สามารถสร้างประโยชน์ให้กับระบบได้เยอะมากๆ

แล้วก็ จบไปอีกหนึ่งตอน ปิดท้ายด้วย web ที่มีหน้าตาเหมือนกับใน Ep.3

PS.

เนื้อหาทั้งหมด จะแบ่งเป็น 7 ตอน
EP1. introduction
EP2. The Hero Editor
EP3. Master/Detail
EP4. Multiple Components
EP5. Services
EP6. Routing
EP7. HTTP
ตามดูโค้ดได้ที่ Github

Thank you

Angular.io บทความนี้อยู่ภายใต้ลิขสิทธิ์แบบ CC BY 4.0

Tell your friend about thisShare on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on Google+
Google+
0

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.