การพัฒนา Web Application ด้วย Angular (Angular 22)

ทำไมต้องเรียนหลักสูตรนี้

Angular คือเฟรมเวิร์กหน้าบ้านจาก Google ที่ให้มาครบในชุดเดียว ทั้ง Router, HttpClient, ฟอร์ม, การทดสอบ และเครื่องมือ build จึงเหมาะกับระบบงานองค์กรที่มีหลายหน้าจอ หลายบทบาทผู้ใช้ และต้องดูแลกันเป็นทีมไปอีกหลายปี Angular ออกเวอร์ชันหลักปีละครั้ง และแต่ละเวอร์ชันได้รับการดูแลรวม 18 เดือน Angular 22 ออกเมื่อวันที่ 3 มิถุนายน 2026 อยู่ในช่วงพัฒนาต่อเนื่องถึงมิถุนายน 2027 และได้รับแพตช์แบบ LTS ถึงมิถุนายน 2028

Angular ในวันนี้ต่างจากที่หลายคนเคยเห็นมาก ไม่ต้องเขียน NgModule แล้ว component เป็นแบบ standalone สถานะของหน้าจอจัดการด้วย Signals โปรเจกต์ใหม่ทำงานแบบ zoneless คือไม่ต้องใช้ Zone.js ตั้งแต่ Angular 21 และใน Angular 22 ค่าเริ่มต้นของ change detection เปลี่ยนเป็น OnPush ส่วน Signal Forms และ httpResource() ก็ประกาศเป็นเวอร์ชันเสถียรแล้ว ตำราและตัวอย่างโค้ดที่ค้นเจอบนอินเทอร์เน็ตจำนวนมากจึงล้าสมัย

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

สอนจากประสบการณ์ระบบจริงที่ใช้ Angular

HANUMANIT พัฒนา ระบบประเมินผลการปฏิบัติงาน PerformKPI (performkpi.com) ด้วย Angular 22 คู่กับ REST API ที่เขียนด้วย FastAPI และฐานข้อมูล PostgreSQL ระบบนี้ใช้ถ่ายทอด KPI จากองค์กรลงถึงบุคคล บันทึกผลงานรายงวด ประเมินผล ทำแดชบอร์ดผู้บริหาร และให้บริการหลายองค์กรในระบบเดียว มีมากกว่า 50 หน้าจอ ในห้องอบรมเราจะเปิดตัวอย่างการตัดสินใจจริงจากระบบนี้ เช่น

• Standalone ทั้งระบบ ไม่มี NgModule และไม่มี Zone.js เริ่มแอปด้วย bootstrapApplication() และตั้งค่าทั้งหมดผ่าน provider ในไฟล์ app.config.ts ไฟล์เดียว
• ทุกหน้าโหลดแบบ lazy ด้วย loadComponent แยกเป็นสองโครงหน้า คือหน้าสาธารณะกับหน้าหลังล็อกอิน และป้องกันแต่ละหน้าด้วย functional guard เช่น permissionGuard('kpi.view_own') ส่วนเมนูด้านข้างกรองจากสิทธิ์ชุดเดียวกัน
• ล็อกอินแบบ JWT ที่ไม่ทำให้ผู้ใช้หลุด access token อยู่ในหน่วยความจำเท่านั้น Interceptor แนบ token ให้ทุกคำขอ เมื่อเจอ 401 จะต่ออายุให้อัตโนมัติ และรวมคำขอต่ออายุที่ยิงพร้อมกันให้เหลือครั้งเดียว ก่อนเริ่ม routing แอปกู้เซสชันด้วย provideAppInitializer เพื่อให้ guard เห็นสถานะที่ถูกต้อง
• หลายองค์กรในระบบเดียว แต่ละองค์กรเข้าผ่าน subdomain ของตัวเอง แอปอ่านรหัสองค์กรจากชื่อโดเมนแล้วส่งไปกับคำขอผ่าน Interceptor ส่วนรอบประเมินที่ผู้ใช้เลือกก็แนบไปอัตโนมัติด้วย Interceptor อีกตัว
• Signals แทน state library เก็บสถานะผู้ใช้ไว้ใน service ด้วย signal() และ computed() ดึงข้อมูลด้วย rxResource() และ httpResource() ส่วนพารามิเตอร์จาก URL เข้า component เป็น input() โดยตรงด้วย withComponentInputBinding()
• ไม่ใช้ UI library และ chart library ออกแบบด้วย SCSS design token ของตัวเอง สลับโหมดมืดด้วย effect() และวาดกราฟเส้นบนแดชบอร์ดด้วย SVG ช่วยให้ไฟล์ที่โหลดครั้งแรกอยู่ในงบที่ตั้งไว้ใน angular.json
• รองรับภาษาอังกฤษโดยไม่ต้องแก้ทุกเทมเพลต ต้นฉบับเป็นภาษาไทย ใช้ pipe แปลข้อความ และโหลดพจนานุกรมแยกเป็น chunk เฉพาะเมื่อผู้ใช้เลือก English
• ขึ้นระบบด้วย Docker สองขั้น build ด้วย Node 24 แล้วเสิร์ฟไฟล์ด้วย Nginx ซึ่งส่งต่อ /api ไปที่ backend และส่งหน้า HTML ที่มี meta ให้บอตของ LINE และ Facebook แทนการทำ SSR ทั้งระบบ build ผ่าน Jenkins ทุกครั้งก่อน deploy

สิ่งที่จะได้ลงมือทำและผลลัพธ์กลับบ้าน

• เว็บแอปตัวอย่าง 1 ระบบ มีหน้าสาธารณะ หน้าล็อกอิน เมนูตามสิทธิ์ผู้ใช้ รายการข้อมูล ฟอร์มเพิ่มและแก้ไข และแดชบอร์ด ต่อกับ REST API จริงที่ทีมงานเตรียมไว้
• โปรเจกต์ตั้งต้นที่ใช้งานต่อได้ มีโครงโฟลเดอร์ core/features/layout, Interceptor สำหรับ JWT, Guard, ธีมโหมดมืด, เทสต์ และ Dockerfile พร้อมใช้
• แนวทางเลือกเครื่องมือ เมื่อไรใช้ Signals เมื่อไรใช้ RxJS เมื่อไรควรใช้ UI library และเมื่อไรจำเป็นต้องทำ SSR
• เช็กลิสต์อัปเกรดจาก Angular รุ่นเก่า สำหรับระบบที่ยังใช้ NgModule, Zone.js หรือ Karma
• ใบประกาศนียบัตรออนไลน์ ที่ตรวจสอบได้ สำหรับผู้ที่เข้าอบรมครบ

โครงสร้างเนื้อหาหลักสูตร (3 วัน · 18 ชั่วโมง)

วันที่ 1: พื้นฐาน Angular รุ่นปัจจุบัน Component และ Signals

• เริ่มต้นกับ Angular
  • Angular ต่างจาก React และ Vue อย่างไร และเหมาะกับงานแบบไหน
  • เตรียมเครื่อง: Node.js 22 หรือ 24 ขึ้นไปตามที่ Angular 22 รองรับ และ Angular CLI
  • สร้างโปรเจกต์ด้วย ng new รันด้วย ng serve และอ่านโครงสร้าง main.ts, app.config.ts, app.routes.ts
  • TypeScript ที่ต้องใช้ใน Angular: type, interface, generic และ union type
• Standalone Component และเทมเพลต
  • สร้าง component ด้วย ng generate แยกไฟล์ template และ style หรือเขียนในไฟล์เดียว
  • Data binding, event binding และ control flow @if, @for, @switch, @let
  • ส่งข้อมูลระหว่าง component ด้วย input(), output() และ model()
  • Pipe สำเร็จรูป และเขียน pipe เอง เช่น แสดงวันที่แบบ พ.ศ.
• Signals และการอัปเดตหน้าจอ
  • signal(), computed(), effect() และ linkedSignal()
  • ทำไม Angular รุ่นใหม่ไม่ต้องใช้ Zone.js และ OnPush ที่เป็นค่าเริ่มต้นใน Angular 22 มีผลกับโค้ดเราอย่างไร
  • Dependency Injection ด้วย inject() และเก็บสถานะที่ใช้ร่วมกันหลายหน้าไว้ใน service

วันที่ 2: Router, REST API, ระบบล็อกอิน และฟอร์ม

• Router และโครงหน้า
  • กำหนดเส้นทาง children และ layout shell แยกหน้าสาธารณะกับหน้าหลังล็อกอิน
  • โหลดหน้าแบบ lazy ด้วย loadComponent ตั้ง title ต่อหน้า และรับพารามิเตอร์เป็น input()
  • Functional guard สำหรับตรวจการล็อกอินและสิทธิ์ และสร้างเมนูตามสิทธิ์จากข้อมูลชุดเดียวกัน
• ต่อ REST API
  • HttpClient และการแยกโค้ดเรียก API เป็น service ต่อเรื่อง พร้อม type ของข้อมูลที่รับส่ง
  • ดึงข้อมูลด้วย httpResource() และ rxResource() พร้อมสถานะกำลังโหลดและข้อผิดพลาด
  • RxJS เท่าที่จำเป็น: Observable, pipe, switchMap, catchError และการแปลงไปมากับ Signals
  • ตั้ง proxy สำหรับเรียก API ระหว่างพัฒนา
• ระบบล็อกอินแบบ JWT
  • Interceptor แนบ token ต่ออายุอัตโนมัติเมื่อเจอ 401 และรวมคำขอต่ออายุที่เกิดพร้อมกัน
  • ที่เก็บ token แบบไหนปลอดภัยกว่า และกู้เซสชันตอนเปิดแอปด้วย provideAppInitializer
  • ส่งค่าบริบทเช่นรหัสองค์กรผ่าน header แบบที่ PerformKPI ใช้
• ฟอร์มและการตรวจข้อมูล
  • Signal Forms: สร้างฟอร์มจาก signal กำหนดกฎตรวจข้อมูล และแสดงข้อความผิดพลาดภาษาไทย
  • ฟอร์มที่ซับซ้อนขึ้น: ฟิลด์ที่ขึ้นกับฟิลด์อื่น รายการที่เพิ่มลดได้ และการตรวจกับ API
  • เทียบกับ Template-driven และ Reactive Forms ที่ยังพบในระบบเดิม

วันที่ 3: UI ที่ใช้งานจริง การทดสอบ และการนำขึ้นเซิร์ฟเวอร์

• หน้าจอที่พร้อมใช้งาน
  • จัดสไตล์ด้วย SCSS และ design token รองรับมือถือ และโหมดมืด
  • ทำการ์ดตัวเลขและกราฟเส้นแบบเบา ๆ ด้วย SVG และรู้ว่าเมื่อไรควรใช้ chart library
  • การเข้าถึง (accessibility) และ Angular Aria
  • รองรับหลายภาษา: แนวทาง i18n ของ Angular เทียบกับการแปลขณะรันแบบที่ PerformKPI เลือก
• ความเร็วและขนาดไฟล์
  • เลื่อนการโหลดส่วนที่ไม่จำเป็นด้วย @defer และตั้งงบขนาดไฟล์ใน angular.json
  • SPA กับ SSR: ทางเลือกเรื่อง SEO และการแชร์ลิงก์ และกรณีที่ไม่จำเป็นต้องทำ SSR
• การทดสอบ
  • เขียน Unit test ด้วย Vitest และ TestBed ที่ติดมากับโปรเจกต์ใหม่
  • ทดสอบ component, service และ guard โดยจำลองการเรียก API
• นำขึ้นเซิร์ฟเวอร์จริง
  • ng build สำหรับ production และตั้งค่าแยกตามสภาพแวดล้อม
  • Dockerfile สองขั้น (Node build แล้วเสิร์ฟด้วย Nginx) ตั้ง Nginx ให้รองรับ SPA, ส่งต่อ /api และตั้ง cache ไฟล์ static
  • CI/CD ด้วย Jenkins ให้ build และเทสต์ผ่านก่อน deploy ตามแบบ PerformKPI
• อัปเกรดและดูแลระยะยาว
  • ใช้ ng update และ migration อัตโนมัติ ย้ายจาก NgModule ไปเป็น standalone และเลิกใช้ Zone.js
  • ย้ายเทสต์จาก Karma/Jasmine มาเป็น Vitest
  • วางแผนรอบอัปเกรดตามตาราง LTS ของ Angular

สิ่งที่ต้องเตรียมสำหรับเข้าอบรม

• คอมพิวเตอร์โน้ตบุ๊ก Windows 10/11, macOS หรือ Linux แรมอย่างน้อย 8 GB
• ติดตั้ง Node.js รุ่น LTS (22 หรือ 24), Git, Docker Desktop และ VS Code พร้อมส่วนขยาย Angular Language Service (ทีมงานส่งคู่มือติดตั้งให้ก่อนวันอบรม)
• บัญชี GitHub สำหรับเก็บโปรเจกต์ที่ทำในห้อง

หมายเหตุ หลักสูตรนี้สอนบน Angular 22 ซึ่งเป็นเวอร์ชันเสถียรล่าสุดในช่วงเปิดรับสมัคร และจะปรับตามเวอร์ชันล่าสุดในช่วงที่เปิดอบรม หลักสูตรเน้นงานหน้าบ้าน ทีมงานเตรียม REST API สำหรับฝึกไว้ให้ ผู้ที่ต้องการสร้าง API เองแนะนำให้เรียนต่อหลักสูตร การพัฒนา Web Application และ REST API ด้วย Yii3 ผู้ที่ยังไม่เคยเขียน JavaScript ควรฝึกพื้นฐานภาษามาก่อนเข้าอบรม