เพิ่งมีเวลาว่างมาดู Angular 14 ที่ถูกปล่อยออกมาเมื่อต้นเดือน
ซึ่งมี feature หลายตัวที่น่าสนใจ
แต่มีตัวหนึ่งที่ติดตามมาเรื่อย ๆ ตั้งแต่เปิด RFC
คือ Standalone Component
ดังนั้นเรามาทำความรู้จัก และลองใช้งานกันนิดหน่อย
ปล. ในตอนนี้ยังเป็น feature ที่อยู่ใน developer preview เท่านั้น
ดังนั้นอาจจะเปลี่ยนแปลงอีกมาก เมื่อปล่อยตัว stable ออกมา
ดังนั้นก็ลอง ๆ ไว้ก่อน อย่าเพิ่มเอาไปใช้งานจริง
เป้าหมายหลักของ Standalone Component
- ทำให้การพัฒนาระบบง่ายขึ้น โดยไม่ต้องใช้งาน NgModules ซึ่งมีความซับซ้อนสูง
- ลด code ที่ไม่จำเป็นออกไป
- ทำให้ง่ายต่อการเริ่มต้นมากขึ้น
- แน่นอนว่ายังทำงานหรือใช้งานกับ API เดิมได้
มาเริ่มใช้งานกันดีกว่า
เริ่มด้วยการสร้างระบบงานขึ้นมาก่อน
ซึ่งจะมี NgModules มาให้เป็นค่า default
ซึ่งแน่นอนว่า เราจะลองไม่ใช้ในตัวอย่างนี้
แต่ตามจริงสามารถทำงานร่วมกันได้นะ
จากนั้นทำการแก้ไขไฟล์ main.ts เพื่อลบการใช้งาน Module ทิ้งไป
ในไฟล์ AppComponent นั้นต้องกำหนดให้เป็น standalone component
นั่นคือ standalone: true
และ import Module, Component และ Directive ต่าง ๆ ที่จะใช้งาน
เช่น CommonModule และ RouterModule เป็นต้น
เพียงเท่านี้ก็สามารถใช้งานได้แล้ว
รวมทั้งสามารถลบ AppModule ทิ้งไปจาก project ได้เลย
ส่วนการสร้าง Standalone component อื่น ๆ ก็ใช้งานผ่าน ng generate ได้เลย
และได้ code ออกมาแบบนี้
เพียงเท่านี้ก็พอใช้งานได้แล้ว
จะเห็นได้ว่าเรียบง่ายขึ้นนะ !!!
