Jaynarol Blog

Angular 2 : Component

สวัสดีครับ จากบทความที่แล้ว เราได้เห็น code เบื่องต้นที่ทำให้ Angular 2 สามารถแสดงผลออกมาได้

นั่นคือความสามารถของ Component ซึ่งถือได้ว่าเป็นหัวใจหลักใน Life Cycle ของ Angular 2

บทความนี้ผมจะพาไปทำความรู้จักกับมันให้มากขึ้นพร้อมตัวอย่างการใช้งานเพื่อให้เห็นภาพครับ

 

 

เข้าใจหลักการ

สมัยก่อนเมื่อเราจะสร้างเว็บขึ้นมาสักหน้านึงจากไฟล์ html เปล่าๆ

เราต้องนำ tags ต่างๆที่ html มีให้เช่น div form p span มาประกอบเข้าด้วยกันเพื่อให้เว็บมีรูปร่างตามที่เราต้องการ

หากเราต้องการให้มี event ตรง button หรือ input เราก็จะเขียน JavaScript แยกไปอีกไฟล์ต่างหาก

ทีนี้ พอมีหลายๆหน้าเข้าเว็บก็เริ่มมีความซับซ้อน ไม่ว่าจะทางฝั่ง html ที่มีโค้ดยุบยับและใช้ซ้ำเต็มไปหมด

ฝั่ง Js ก็ไม่แพ้กัน ในไฟล์มีการเขียน event ปนกันมั่วไปหมด แยกไม่ออกว่าตัวไหนใช้เมื่อไหร่หรือของหน้าไหนบ้าง

นานวันเข้าก็ยิ่งเริ่มไม่กล้าไปแตะ code เก่าๆ เพราะกลัวงานพัง และกลายเป็น code smell ในที่สุด

แนวคิดนี้เปรียบได้กับการสร้างบ้านด้วยไม้ทีละแผ่น แต่ละส่วนตอกเชื่อมกันอย่างเหนียวแน่น โยกย้าย ดัดแปลงยาก

หากมีการจัดการที่ไม่ดีพอ ยิ่งบ้านมีความใหญ่และซับซ้อนมาก โอกาสที่บ้านจะออกมารูปทรงประหลาดๆก็สูงตามไปด้วย

 

จึงเป็นที่มาของแนวคิด Component ใน Angular 2 ซึ่งใช้การแยกเว็บออกเป็นส่วนๆ และแต่ละส่วนต้องครบในตัวเอง

เปรียบได้กับการสร้างบ้านด้วยการใช้ห้องสำเร็จรูป มาประกอบกันเป็นบ้าน

เช่นอยากให้ในบ้านมี ห้องน้ำ ห้องครัว ห้องนอน การสร้างบ้านก็เพียงแค่เอาแต่ละห้องมาตั้งวางเรียงกันได้เลย

หรืออยากจะให้ห้องน้ำอยู่ในห้องนอนก็สามารถวางซ้อนกันได้

โดยในแต่ละห้องจะมีหน้าที่ รูปแบบ การใช้งานของตัวมันเองอย่างชัดเจน

หากอนาคตอยากเปลี่ยน ย้าย หรือ เพิ่มห้องใหม่ก็สามารถดำเนินการตรงพื้นที่ส่วนนั้นได้เลยโดยไม่กระทบกับห้องอื่นๆ

 

 

ส่วนประกอบของไฟล์

บทความที่แล้วหากเราสังเกตุไฟล์ index.html จะพบว่าใน body มีเพียง tag เดียวคือ my-app

แต่มันก็ยังทำงานและแสดงผล Hello World ออกมาได้ เพราะอะไร?

สิ่งสำคัญสิ่งแรกที่เราต้องรู้เกี่ยวกับ Angular 2 คือ  Component จะถูกเรียกใช้งานผ่านชื่อ tag เสมอ

แน่นอนว่า tag my-app ก็คือ Component ตัวนึง (ตัวมันเองอยู่ที่ app/app.component.ts)

โดยไฟล์ Component จะมีจุดสำคัญอยู่ 2 จุดได้แก่ selector คือชื่อ tag ที่เราตั้งและ template สำหรับการแสดงผล

 

สิ่งที่ 2 ที่ต้องรู้ต่อก็คือ Component มีการทำงานเป็น tree ที่มี node ลึกลงไปได้เรื่อยๆ

เราสามารถระบุ tag Component ที่เราต้องการลงไปใน template ของ Component อื่นๆได้

เพื่อให้ Angular 2 รู้จักชื่อ tag ของเราว่าผูกกับ Component ไหน

การเรียกใช้งาน Component เราต้อง import ไฟล์ (บรรทัดที่ 2)

และกำหนดลงไปใน Directives (บรรทัดที่ 10) เสมอ

 

 

ตัวอย่างการใช้งาน

component-2

เพื่อให้เห็นภาพและตัวอย่างการนำไปใช้งานจริง การศึกษาด้วย code เป็นวิธีที่ง่ายและเร็วที่สุด

โดย source code ด้านล่างออกแบบตามแนวคิดโครงสร้างของภาพด้านบนครับ