หลักสูตร Advanced Angular เป็นการอบรม Angular 22 ขั้นสูง ครอบคลุม Component และ Directive ขั้นสูง, Dependency Injection, Signals กับ RxJS, NgRx SignalStore, Authentication, Angular Material, i18n, SSR และ Workshop CRUD ร่วมกับ Node.js เหมาะกับ Developer และ IT Manager ที่มีพื้นฐาน Angular มาบ้าง
เมื่อแอป Angular โตขึ้นทั้งจำนวนหน้า จำนวนผู้ใช้ และจำนวนนักพัฒนาในทีม การเขียนให้ทำงานได้อย่างเดียวไม่พออีกต่อไป ต้องวางโครงสร้างที่ดูแลง่าย แยกความรับผิดชอบด้วย Dependency Injection จัดการ State อย่างเป็นระบบ ป้องกันสิทธิ์การเข้าถึง และทำให้แอปเร็วตั้งแต่โหลดหน้าแรก Angular รุ่นปัจจุบันมีเครื่องมือสำหรับงานเหล่านี้ครบ ทั้ง Signals, Zoneless, @defer, SSR พร้อม Incremental Hydration และ Animation ด้วย CSS ที่มาแทนแพ็กเกจ Animation แบบเดิม
หลักสูตรนี้เจาะลึก Angular 22 ในระดับขั้นสูง ตั้งแต่ Component และ Directive ขั้นสูง Dependency Injection เชิงลึก Signals ร่วมกับ RxJS การจัดการ State ด้วย NgRx SignalStore ระบบ Authentication ด้วย Interceptor และ Guard การใช้ Angular Material และ CDK การผสานไลบรารีภายนอก เว็บหลายภาษาด้วย i18n ไปจนถึง Performance, Testing และ Deploy ผ่าน Workshop ระบบจัดการคำสั่งซื้อที่ทำ CRUD ร่วมกับ Node.js (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Advanced)
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Advanced Angular เนื้อหาเขียนใหม่สำหรับ Angular 22 อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ผ่าน Workshop ระบบจัดการคำสั่งซื้อที่ต่อเติมตลอดหลักสูตร ระดับ Advanced ผู้เรียนจะได้วางโครงสร้างแอปขนาดใหญ่ สร้าง Component และ Directive ขั้นสูง ใช้ Dependency Injection เชิงลึก ใช้ Signals ร่วมกับ RxJS จัดการ State ด้วย NgRx SignalStore ทำ Authentication ด้วย Interceptor และ Guard ใช้ Angular Material ทำเว็บหลายภาษาด้วย i18n เพิ่มความเร็วด้วย @defer และ SSR เขียน Test ด้วย Vitest แล้ว Deploy ร่วมกับ Node.js API ด้วย Docker พร้อมรับซอร์สโค้ดครบทุก Lab กลับไปใช้งานต่อ
Section 1: Lab: โครงสร้างแอป Angular ขนาดใหญ่
Section 2: Lab: Component ขั้นสูง
Section 3: Custom Directive และ Pipe ขั้นสูง
Section 4: Dependency Injection เชิงลึก
Section 5: Lab: Signals ร่วมกับ RxJS
Section 6: Lab: จัดการ State ด้วย NgRx SignalStore
Section 7: Lab: Authentication และ Authorization
Section 8: Lab: Angular Material และ CDK
Section 9: Animation แบบใหม่
Section 10: Lab: ผสานไลบรารีภายนอก
Section 11: Lab: CRUD ร่วมกับ Node.js API
Section 12: เว็บหลายภาษาด้วย i18n
Section 13: Performance และ SSR
Section 14: Lab: Testing และ PWA
Section 15: Workshop: ระบบจัดการคำสั่งซื้อและ Deploy
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
viewChild() ใช้เข้าถึง Element หรือคอมโพเนนต์ที่อยู่ใน Template ของคอมโพเนนต์นั้นเอง ส่วน contentChild() ใช้เข้าถึงเนื้อหาที่คอมโพเนนต์แม่ส่งเข้ามาผ่าน ng-content หรือ Content Projection ใน Angular รุ่นปัจจุบันทั้งสองแบบเป็นฟังก์ชันที่คืนค่าเป็น Signal จึงอ่านค่าได้เมื่อพร้อมโดยไม่ต้องรอ Lifecycle อย่าง ngAfterViewInit ถ้าต้องการหลายตัวพร้อมกันใช้ viewChildren() หรือ contentChildren() ส่วนโค้ดรุ่นเดิมที่ใช้ Decorator @ViewChild ยังทำงานได้
NgRx เป็นชุดไลบรารีจัดการ State ของ Angular ปัจจุบันนิยมใช้ NgRx SignalStore ซึ่งสร้าง Store ด้วย signalStore แล้วประกอบความสามารถด้วย withState, withComputed และ withMethods อัปเดตข้อมูลด้วย patchState และคอมโพเนนต์อ่านค่าเป็น Signal ได้ทันที ส่วน NgRx Store แบบดั้งเดิมใช้แนวคิด Redux ที่คอมโพเนนต์ Dispatch Action แล้ว Reducer คำนวณ State ใหม่ ซึ่งยังพบมากในระบบเดิมและเหมาะกับแอปที่ต้องการติดตามทุกการเปลี่ยนแปลง
ใช้ HTTP Interceptor แบบฟังก์ชัน โดยเขียนฟังก์ชันที่รับ Request และ next แล้ว clone Request เดิมพร้อมเพิ่ม Header Authorization ที่มี Token ของผู้ใช้ จากนั้นลงทะเบียนด้วย provideHttpClient(withInterceptors([...])) ใน app.config.ts ทุก Request ที่ส่งผ่าน HttpClient จะแนบ Token ให้อัตโนมัติ และควรจัดการกรณี API ตอบ 401 ด้วย พร้อมใช้ Guard แบบ CanActivateFn หรือ CanMatchFn กันไม่ให้ผู้ที่ยังไม่ล็อกอินเข้าหน้าที่ต้องมีสิทธิ์
เหมาะกับ Developer ที่เขียน Angular ได้แล้วและต้องการพัฒนาแอปขนาดใหญ่ Tech Lead หรือ IT Manager ที่ต้องวางมาตรฐานโปรเจกต์ของทีม ผู้ที่ดูแลระบบ Angular รุ่นเดิม และ Full-stack Developer ที่ต้องการเชื่อม Angular กับ Node.js ควรเคยเขียน Angular มาบ้าง เช่น Component, Routing และ HttpClient เขียน TypeScript ได้คล่อง และเข้าใจ Web Service กับฐานข้อมูลเบื้องต้น
วางโครงสร้างแอป Angular 22 ขนาดใหญ่ สร้าง Component และ Directive ที่นำกลับมาใช้ซ้ำได้ ใช้ Dependency Injection เชิงลึก จัดการ State ด้วย Signals, RxJS และ NgRx SignalStore ทำระบบ Login และสิทธิ์ด้วย Interceptor และ Guard ใช้ Angular Material ทำเว็บหลายภาษาด้วย i18n เพิ่มความเร็วด้วย @defer และ SSR เขียน Test ด้วย Vitest และ Deploy ร่วมกับ Node.js API ด้วย Docker ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้
ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับเนื้อหาให้ตรงกับงานของทีม เช่น เน้นการอัปเกรดโปรเจกต์ Angular รุ่นเดิมขององค์กร การวางมาตรฐานโครงสร้างโปรเจกต์ หรือการเชื่อมกับ Backend ที่ทีมใช้อยู่ ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449
Node.js ทำให้ JavaScript ที่นักพัฒนาคุ้นเคยจากหน้าเว็บ ทำงานฝั่งเซิร์ฟเวอร์และบนเครื่องได้ ตั้งแต่สคริปต์จัดการไฟล์ เครื่องมือ Command Line ไปจนถึง Web API และระบบแบบ Real-time เวอร์ชันปัจจุบันมีเครื่องมือในตัวมากขึ้น เช่น fetch, Test Runner, Watch Mode…
Microservices ช่วยให้แบ่งระบบใหญ่เป็นบริการเล็กหลายตัวที่พัฒนา Deploy และขยายแยกกันได้ ทีมจึงส่งงานได้เร็วขึ้นและขยายเฉพาะส่วนที่มีโหลดสูง Node.js เหมาะกับงานนี้เพราะเบา เริ่มเร็ว และจัดการงาน I/O จำนวนมากได้ดี แต่การแยก Service…
MEVN Stack คือชุดเทคโนโลยีสำหรับพัฒนาเว็บแอปแบบ Full Stack ด้วย JavaScript ภาษาเดียว ประกอบด้วย MongoDB ฐานข้อมูล NoSQL ที่เก็บข้อมูลเป็นเอกสาร Express เฟรมเวิร์กสำหรับสร้าง REST API บน Node.js และ Vue.js เฟรมเวิร์ก Frontend…
