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

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

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

ทำให้เราเข้าใจมากขึ้น เพราะว่า บางทีการอ่านมันเข้าใจยาก
ตัวอย่างเช่น

หลังจากนั้นลองทำตาม 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 ก่อนนะ)

$npm install -g @angular/cli

จากนั้นทำการสร้าง project ด้วยคำสั่ง

$ng new  ชื่อ project

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

ผลที่ได้คือ สร้าง folder ใหม่ขึ้นมาเป็นชื่อ project นั่นเอง
เมื่อเข้าไปดูใน folder จะมีโครงสร้างดังนี้

คำอธิบาย มันเยอะมาก ๆ !!
โดย folder ที่สำคัญมาก ๆ คือ src เป็นที่จัดเก็บ code ทั้งหมดของ project

จากนั้นทำการ start server ด้วยคำสั่ง

$ng serve

จะทำการ start server ที่ port 4200
ดังนั้นเข้าไปดูผลการทำงานได้ใน browser ดังนี้

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

เริ่มอ่านจากไฟล์ index.html
ซึ่งจะมี tag ที่งงมาก ๆ คือ app-root !!
มันคืออะไร มาจากไหน คำถามเต็มไปหมด

มาหาคำตอบกัน
โดยเริ่มจากเข้าไปดูไฟล์ชื่อว่า app.module.ts ใน folder app

ให้สังเกตุว่าในส่วนของ bootstrap จะมีค่าคือ AppComponent
bootstrap ใช้กำหนดว่า component ที่เป็นตัวหลักในการทำงาน
โดยจะอ้างอิงไปยังไฟล์ app.component.ts
ส่วนพวกไฟล์ css และ html หรือ template ก็จะชื่อเดียวกัน (เป็น convention พื้นฐาน แต่เปลี่ยนได้นะ)

เมื่อเปิดไฟล์ app.component.ts จะเห็น selector ชื่อว่า app-root
เห็นการกำหนด templateUrl และ styleUrls ไปยังไฟล์ต่าง ๆ
น่าจะทำให้เข้าใจมากยิ่งขึ้น
แน่นอนว่า ถ้าไม่ชอบก็แก้ไขกันได้เลย

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

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

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

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

แสดงดังนี้

ดังนั้นสิ่งที่ต้องทำก่อนเลยคือ สร้าง component ทั้งสองขึ้นมาก่อนผ่าน Angular CLI
ซึ่งจะทำการสร้าง folder ย่อยขึ้นมาใน folder app ตามชื่อของ component ดังนี้

ต่อจากนี้ก็ไปเขียน code ในแต่ละ component ตามที่เราต้องการ
ดูเพิ่มเติมได้จาก Github :: Up1 :: Angular Ippo

สิ่งที่ angular CLI ทำให้อีกคือ การเพิ่ม import component ในไฟล์ app.module.ts ให้ด้วย

เมื่อทุกอย่างเรียบร้อยมาทำการสร้าง Routing สำหรับ URI ไปยัง component ต่าง ๆ กันดีกว่า
เพื่อสร้าง link ของแต่ละ menu จากหน้าหลัก
โดยสิ่งที่ต้องการคือ

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

ให้ทำการเพิ่ม code ในไฟล์ app.module.ts ประกอบไปด้วย
การ import RouterModule
ทำการกำหนด routing ในส่วนของ NgModule ดังนี้

เพียงเท่านี้ก็สามารถสร้าง component และ routing ของระบบแบบง่าย ๆ ได้แล้วครับ
Demo ของระบบผมเอาขึ้นไว้ที่นี่ Demo Hello with Ippo

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

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