ก้าวแรกสู่สังเวียน Angular

การเริ่มต้นศึกษาสิ่งใหม่ ๆ มันยากเสมอ Angular ก็เช่นกัน ถ้าไปฟังจากนักพัฒนาที่ใช้งานแล้ว พบว่า มันมีความซับซ้อนมาก ๆ แลดูว่าจะยากต่อการใช้งาน ซึ่งมันก็ไม่ผิดแต่อย่างใด ดังนั้นจะขอแนะนำการเริ่มต้นศึกษา Angular ไว้นิดหน่อย รวมทั้งความรู้พื้นฐานไว้นิดหน่อย น่าจะเป็นประโยชน์บ้างเล็กน้อย

เริ่มด้วยการดู VDO ที่น่าสนเกี่ยวกับ Angular ซึ่งมีเพียบบน Youtube

ทำให้เราเข้าใจมากขึ้น เพราะว่า บางทีการอ่านมันเข้าใจยาก ตัวอย่างเช่น https://www.youtube.com/watch?v=LS3aewTkfHI https://www.youtube.com/watch?v=wZ_5des_6_c

หลังจากนั้นลองทำตาม VDO นั่นคือลงมือสร้างระบบและเขียน code (Heros App)

ซึ่งสามารถดู code ตัวอย่างจาก Official website ของ Angular ได้เลย จากตัวอย่างต่าง ๆ จะพบว่า มีสิ่งที่ต้องเรียนรู้เพียบเลย เช่น

• วิธีการสร้าง Angular project ?
• Webpack ?
• TypeScript ?
• ES6 ?

ให้ทำเองตาม VDO และเอกสารน่าจะยากพอควร ดังนั้นมาทำแบบ step-by-step กัน

ขั้นตอนที่ 1 สร้าง Angular project ด้วย Angular CLI

ถ้าสร้างเองน่าจะรอดยาก ดังนั้นทางทีมพัฒนาจึงทำการสร้าง Angular CLI มาให้ เพื่อให้ง่ายต่อการสร้าง project เพื่อให้ง่ายต่อการสร้างส่วนต่าง ๆ เช่น component, router, service และ pipe เพื่อ start server เพื่อทดสอบ และ ตรวจสอบ code ด้วย lint ทั้งหมดนี้ทำงานบน command line ทำการติดตั้ง Angular CLI ด้วยคำสั่ง (ต้องติดตั้ง NPM ก่อนนะ) [code] $npm install -g @angular/cli [/code] จากนั้นทำการสร้าง project ด้วยคำสั่ง [code] $ng new ชื่อ project [/code]

ใช้เวลาการสร้างและติดตั้ง library ต่าง ๆ นานพอสมควร !!

[gist id="ba9f24823e9d3821acc5fe4b3838307b" file="1.txt"] ผลที่ได้คือ สร้าง folder ใหม่ขึ้นมาเป็นชื่อ project นั่นเอง เมื่อเข้าไปดูใน folder จะมีโครงสร้างดังนี้ [gist id="ba9f24823e9d3821acc5fe4b3838307b" file="2.txt"] คำอธิบาย มันเยอะมาก ๆ !! โดย folder ที่สำคัญมาก ๆ คือ src เป็นที่จัดเก็บ code ทั้งหมดของ project จากนั้นทำการ start server ด้วยคำสั่ง [code] $ng serve [/code] จะทำการ start server ที่ port 4200 ดังนั้นเข้าไปดูผลการทำงานได้ใน browser ดังนี้

ขั้นตอนที่ 2 มาศึกษาโครงสร้าง project ที่สร้างกันหน่อย

เริ่มอ่านจากไฟล์ index.html ซึ่งจะมี tag ที่งงมาก ๆ คือ app-root !! มันคืออะไร มาจากไหน คำถามเต็มไปหมด [gist id="ba9f24823e9d3821acc5fe4b3838307b" file="index.html"] มาหาคำตอบกัน โดยเริ่มจากเข้าไปดูไฟล์ชื่อว่า app.module.ts ใน folder app [gist id="ba9f24823e9d3821acc5fe4b3838307b" file="app.module.ts"] ให้สังเกตุว่าในส่วนของ bootstrap จะมีค่าคือ AppComponent bootstrap ใช้กำหนดว่า component ที่เป็นตัวหลักในการทำงาน โดยจะอ้างอิงไปยังไฟล์ app.component.ts ส่วนพวกไฟล์ css และ html หรือ template ก็จะชื่อเดียวกัน (เป็น convention พื้นฐาน แต่เปลี่ยนได้นะ) เมื่อเปิดไฟล์ app.component.ts จะเห็น selector ชื่อว่า app-root เห็นการกำหนด templateUrl และ styleUrls ไปยังไฟล์ต่าง ๆ น่าจะทำให้เข้าใจมากยิ่งขึ้น แน่นอนว่า ถ้าไม่ชอบก็แก้ไขกันได้เลย [gist id="ba9f24823e9d3821acc5fe4b3838307b" file="app.component.ts"]

ปล. เมื่อแก้ไขและบันทึกแล้ว จะทำการ compile และ reload หน้าให้แบบอัตโนมัติด้วยนะ มันสะดวกสบายมาก ๆ

ขั้นตอนที่ 3 เพื่อความเข้าใจมากขึ้น มาลองสร้างระบบขำ ๆ นิดหน่อย

มีเป้าหมายเพื่อสร้าง component และการใช้งาน routing เพื่อจัดการ URI สวย ๆ ของ project

สิ่งที่ต้องการคือ ในหน้าหลักของระบบจะมี menu ไปสองหน้าคือ Welcome และ Ippo

แสดงดังนี้ ดังนั้นสิ่งที่ต้องทำก่อนเลยคือ สร้าง component ทั้งสองขึ้นมาก่อนผ่าน Angular CLI ซึ่งจะทำการสร้าง folder ย่อยขึ้นมาใน folder app ตามชื่อของ component ดังนี้ [gist id="ba9f24823e9d3821acc5fe4b3838307b" file="create_component.txt"] ต่อจากนี้ก็ไปเขียน code ในแต่ละ component ตามที่เราต้องการ ดูเพิ่มเติมได้จาก Github :: Up1 :: Angular Ippo สิ่งที่ angular CLI ทำให้อีกคือ การเพิ่ม import component ในไฟล์ app.module.ts ให้ด้วย [gist id="ba9f24823e9d3821acc5fe4b3838307b" file="app.module_v2.ts"] เมื่อทุกอย่างเรียบร้อยมาทำการสร้าง Routing สำหรับ URI ไปยัง component ต่าง ๆ กันดีกว่า เพื่อสร้าง link ของแต่ละ menu จากหน้าหลัก โดยสิ่งที่ต้องการคือ

• /welcome สำหรับหน้า link Welcome และ ให้เป็น default page ของระบบ ถ้าไม่เจอ URI ใด ๆ ก็มาหน้านี้
•  /ippo สำหรับแสดงหน้า link Ippo

ให้ทำการเพิ่ม code ในไฟล์ app.module.ts ประกอบไปด้วย การ import RouterModule ทำการกำหนด routing ในส่วนของ NgModule ดังนี้ [gist id="ba9f24823e9d3821acc5fe4b3838307b" file="app.module_v3.ts"] เพียงเท่านี้ก็สามารถสร้าง component และ routing ของระบบแบบง่าย ๆ ได้แล้วครับ Demo ของระบบผมเอาขึ้นไว้ที่นี่ Demo Hello with Ippo

มาถึงตรงจะนี้แล้วจะอ่านกันไปทำไม ลงมือทำเถอะนะ ยังมีเรื่องต่าง ๆ ให้ศึกษาอีกมากมาย

ขอให้สนุกกับการ coding ครับ