Angular

ส่วนหนึ่งของ Beginner Book | ทางเลือกของ React

🎯 เล่มนี้เขียนสำหรับ Angular 20 (ออก พ.ค. 2025) · บางตัวอย่างใช้ API ใหม่ที่ออกหลังจากนั้น (เช่น Signal Forms ยังเป็น preview = ฟีเจอร์ที่ยังทดลองอยู่ อาจเปลี่ยน API ในเวอร์ชันถัดไป อย่าใช้ใน production) จะมีป้าย "experimental" กำกับ · Angular ปล่อย major ใหม่ทุก 6 เดือน ให้เทียบกับ angular.dev/releases ก่อนใช้ feature ที่อิงเวอร์ชัน
🟡 หมายเหตุระดับ: เล่มนี้เริ่มจากพื้นฐานแต่บท 10-15 (NgRx = library จัดการ state, MFE (= micro-frontend), security architecture เช่น BFF (= Backend-For-Frontend, pattern ที่มี server กลางรับ request จาก frontend ก่อนส่งต่อไป backend จริง), Trusted Types) แตะระดับกลาง-สูง — ใหม่ Angular ข้ามได้ในรอบแรก กลับมาอ่านตอนจะ deploy production
⚠️ เรียน Angular จาก tutorial/blog เก่า > 2 ปี = เสี่ยงตกรุ่นมาก เพราะ Angular ออกใหม่ทุก 6 เดือน

หนังสือเล่มนี้พาคุณไปถึงไหน

อ่านจบ + ทำ checkpoint หมด คุณจะ:

เข้าใจ Angular philosophy — "batteries included" framework (= มาพร้อมทุกอย่างในตัว)
ทำ component, template, signal, service, DI
ใช้ Angular routing + forms + RxJS
ทำ HTTP + state management + testing
Deploy Angular app + SSR (= render หน้าเว็บฝั่ง server เพื่อให้เปิดเร็ว)
ทำ Accessibility, Security, UI library, Multi-language ระดับ production (= ใช้งานจริงในบริษัท)

📖 คำเฉพาะ Angular 20 ที่จะเจอบ่อยในเล่ม (ตอนนี้ข้ามได้ — แค่รู้ว่ามีคำพวกนี้):
คำ หมายถึง
Standalone component component ที่ไม่ต้องอยู่ใน NgModule — preview ใน v14, GA (Generally Available = ปล่อยใช้งานจริง ไม่ใช่ทดลอง) ใน v15, default ของ ng generate ตั้งแต่ v17+
Signal ค่าที่เปลี่ยนแล้ว Angular อัปเดต UI ให้อัตโนมัติ (เรียกอ่านด้วยวงเล็บ name()) — บทที่ 2
Zoneless Angular ใหม่ไม่ต้องพึ่ง Zone.js แล้ว — เร็วขึ้น bundle เล็กลง — บทที่ 7
inject() วิธีใหม่ในการขอ service เข้าใช้ แทน constructor — บทที่ 3
httpResource API ใหม่สำหรับ fetch ข้อมูล HTTP — บทที่ 6
Built-in control flow @if/@for/@switch แทน *ngIf/*ngFor แบบเก่า — บทที่ 1

คำ	หมายถึง
Standalone component	component ที่ไม่ต้องอยู่ใน NgModule — preview ใน v14, GA (Generally Available = ปล่อยใช้งานจริง ไม่ใช่ทดลอง) ใน v15, default ของ `ng generate` ตั้งแต่ v17+
Signal	ค่าที่เปลี่ยนแล้ว Angular อัปเดต UI ให้อัตโนมัติ (เรียกอ่านด้วยวงเล็บ `name()`) — บทที่ 2
Zoneless	Angular ใหม่ไม่ต้องพึ่ง Zone.js แล้ว — เร็วขึ้น bundle เล็กลง — บทที่ 7
inject()	วิธีใหม่ในการขอ service เข้าใช้ แทน constructor — บทที่ 3
httpResource	API ใหม่สำหรับ fetch ข้อมูล HTTP — บทที่ 6
Built-in control flow	`@if`/`@for`/`@switch` แทน `ngIf`/`ngFor` แบบเก่า — บทที่ 1

Prerequisites — ต้องรู้อะไรก่อนเปิดอ่าน

text

✅ จำเป็น:
- HTML + CSS พื้นฐาน (selector, box model, flex/grid)
- JavaScript ES6+ (let/const, arrow function, destructure, async/await)
- DOM basic (querySelector, addEventListener)
- npm / Node.js (install, run scripts) — ยังไม่เคยใช้? ดูหัวข้อด้านล่าง
- Command line พื้นฐาน — ยังไม่เคยใช้? ดูหัวข้อด้านล่าง

🟡 ดีถ้ามี:
- TypeScript พื้นฐาน (เรียนคู่กันได้ — บทที่ 0 มี recap)
- Object-Oriented programming (class, interface, inheritance)
- RxJS (Observable) — บทที่ 6 จะสอน
- Git basics

❌ ไม่จำเป็น:
- ประสบการณ์ AngularJS (เก่า, ต่างกันมาก)
- React/Vue (มาจาก framework อื่นอ่านได้, มี comparison)
- Backend knowledge

ไม่มีเลย? — เรียน HTML+CSS+JS (เช่น MDN Tutorial) สัก 1-2 อาทิตย์ก่อน

💡 ยังไม่เคยใช้ terminal/npm/Node? ปูพื้นเร็ว ๆ:
Terminal/Command line = หน้าต่างพิมพ์คำสั่งสั่งเครื่อง (Windows: PowerShell, Mac: Terminal, Linux: terminal ของ distro) — เรียนคำสั่งพื้นฐาน cd (เปลี่ยน folder), ls/dir (ดูไฟล์), mkdir (สร้าง folder) ก็พอเริ่มได้
Node.js = ตัวรัน JavaScript บนเครื่อง (นอก browser) — โหลดที่ nodejs.org
npm = ตัวจัดการ package (library) ของ Node — มาพร้อม Node อยู่แล้ว · คำสั่งที่จะเจอบ่อย: npm install <ชื่อ> (ติดตั้ง), npm run <script> (รันคำสั่งที่กำหนดใน package.json)
Tutorial เริ่มต้น: The Odin Project — Command line basics หรือ MDN — Command line crash course

TypeScript Recap — Syntax ที่จะเจอในเล่มนี้

Angular บังคับใช้ TypeScript — ถ้ามาจาก JS ล้วน จะเจอ syntax พวกนี้ ลองดูก่อนเปิดบท 0 (ไม่เข้าใจตอนนี้ไม่เป็นไร — กลับมาดูเป็น reference ได้):

Syntax	ความหมาย	ตัวอย่าง
`: type`	บอก type ของตัวแปร	`let age: number = 25;`
`interface X { ... }`	"สัญญา" รูปร่างของ object	`interface User { name: string; age: number; }`
`<T>`	generic = "type ที่ใส่ทีหลังได้" — เหมือนใส่ช่องว่างให้ type เวลาใช้ค่อยบอกว่าช่องนั้นเก็บอะไร (เช่น `Array<string>` = array ที่เก็บ string · `Array<User>` = array ที่เก็บ User) — ไม่ใช่ Angular template (HTML)	`Array<User>` = array ของ User
`as X`	บอกคอมไพเลอร์ "ฉันรู้ว่าเป็น type นี้แน่" (type cast)	`(input as HTMLInputElement).value`
`!` หลังตัวแปร	"ไม่ใช่ null/undefined แน่" (non-null assertion)	`user!.name` — ใช้เมื่อ TS เตือนแต่เราแน่ใจ
`?.`	optional chaining — ถ้า null/undefined ให้คืน undefined	`user?.address?.city`
`??`	nullish coalescing — ใช้ค่า default ถ้าเป็น null/undefined	`name ?? 'Anonymous'`
`x is Y`	type predicate — บอกว่าฟังก์ชันนี้เช็ค type	`function isUser(x): x is User { ... }`
`@Decorator`	metadata ที่ติดบน class/method (ฟีเจอร์ TS)	`@Component({...})`
`T['x']`	indexed access — type ของ field x ใน T	`User['name']` = string

💡 ถ้าเคยใช้ JavaScript class + JSDoc มาแล้ว — TypeScript เพิ่มแค่ "type ทุกที่" บังคับให้คอมไพเลอร์ตรวจ ไม่มี runtime overhead

Glossary — ศัพท์ที่ใช้ทั้งเล่ม

text

Angular CLI    — เครื่องมือบรรทัดคำสั่ง `ng` — สร้างไฟล์ (generate), build, test
Component       — บล็อก UI หนึ่งชิ้น (template + class + style รวมกัน)
Template        — HTML ที่มีไวยากรณ์ Angular ผสม (@if, {{ }}, [prop])
Decorator       — ป้ายกำกับข้อมูล (metadata) ของ TypeScript เช่น @Component, @Injectable
Standalone      — Component ที่ไม่ต้องอยู่ใน NgModule (เป็น default ตั้งแต่ Angular 17+)
Signal          — ค่าที่เป็น reactive (เปลี่ยนแล้วหน้าจอตามอัตโนมัติ) — อ่านค่าด้วยวงเล็บ `()` (Angular 17+)
Computed        — signal ที่คำนวณมาจาก signal อื่น (lazy = คำนวณตอนถูกอ่าน, memoized = จำผลไว้ไม่คำนวณซ้ำ)
Effect          — side effect (ผลข้างเคียง) ที่รันใหม่ทุกครั้งที่ signal เปลี่ยน
Service         — class สำหรับเก็บ logic/state ที่ใช้ร่วมกัน (มี @Injectable)
DI              — Dependency Injection — Angular เตรียม instance (ตัวของ object) มาให้ใช้
Provider        — การประกาศว่าจะ "สร้าง" dependency ตัวนั้นยังไง
Token           — ตัวระบุ (กุญแจ) ที่ DI ใช้หา dependency (เป็น class หรือ InjectionToken)
inject()         — ฟังก์ชันสำหรับดึง dependency มาใช้ (วิธีใหม่ แทนการรับผ่าน constructor)
Module          — วิธีเก่าในการจัดกลุ่ม component (NgModule, แทบไม่ใช้แล้ว)
Pipe            — ตัวแปลงค่าใน template ({{ value | currency }})
Directive       — ตัวปรับพฤติกรรมของ element
Guard           — ฟังก์ชันควบคุมว่าจะเข้า route (หน้า) นั้นได้ไหม
Resolver        — ฟังก์ชันดึงข้อมูลให้เสร็จก่อนเข้า route
RxJS            — RxJS (Reactive Extensions for JavaScript) — library จัดการข้อมูลที่ไหลมาเป็นสาย (Observable + operators)
Observable      — สายข้อมูล async ที่ส่งได้หลายค่าตามเวลา และ "ขี้เกียจ" (lazy = ทำงานเมื่อมีคน subscribe (สมัครรับข้อมูล))
Subject         — Observable ที่เป็นทั้งคนส่งและคนรับในตัวเดียว (multicast = ส่งให้ผู้ฟังหลายคนพร้อมกัน ต่างจาก Observable ปกติที่ส่งทีละคน)
HttpClient      — โมดูลของ Angular สำหรับเรียก API ผ่าน HTTP
Interceptor     — ฟังก์ชันที่ดักแก้ HTTP request/response กลางทาง
Zone.js         — Zone.js — library ที่ดักจับ async API เพื่อสั่งตรวจการเปลี่ยนแปลง (CD) ให้อัตโนมัติ (ของเก่า)
Change Detection — CD — กระบวนการอัปเดต DOM (หน้าจอ) ให้ตรงกับข้อมูล
OnPush          — กลยุทธ์ CD แบบตรวจเฉพาะเมื่อจำเป็น (เมื่อ input เปลี่ยน reference หรือมี event) — บท 7
Zoneless        — โหมดที่ไม่ใช้ Zone.js ใช้ signal เป็นตัวขับ reactivity ล้วน (Angular 18+)
SSR             — Server-Side Rendering — สร้าง HTML ที่ฝั่งเซิร์ฟเวอร์ก่อนส่งให้ browser
Hydration       — Hydration — การ "ต่อชีวิต" JS เข้ากับ HTML ที่เซิร์ฟเวอร์ render มาแล้ว
Defer (@defer)  — บล็อก template ที่โหลดแบบ lazy (โหลดทีหลังเมื่อจำเป็น) (Angular 17+)
Deferrable view — view (ส่วนหน้าจอ) ที่โหลดเมื่อต้องการ
TestBed         — TestBed — เครื่องมือตั้งค่าสภาพแวดล้อมสำหรับ test ของ Angular
ARIA            — Accessible Rich Internet Applications — attribute ที่ช่วยให้ screen reader เข้าใจหน้าเว็บ (a11y)
i18n            — Internationalization (สากลานุวัตร) — เตรียมโค้ดให้รองรับหลายภาษา (i18n = i + อักษร 18 ตัว + n)
l10n            — Localization (ท้องถิ่นานุวัตร) — แปลภาษา + จัดรูปแบบตามท้องถิ่น (วันที่/เงิน)
WCAG            — Web Content Accessibility Guidelines — มาตรฐานการทำเว็บให้ทุกคนเข้าถึงได้ (a11y)
CSP             — Content Security Policy — header ด้านความปลอดภัยที่จำกัดว่าโหลดอะไรได้บ้าง
NgRx            — NgRx — library จัดการ state แบบ Redux (= รูปแบบเก็บ state ส่วนกลางก้อนเดียว แก้ผ่าน "action" เท่านั้น)
batteries included — (สำนวนว่า "แบตใส่มาให้แล้ว ใช้งานได้เลย") หมายถึงมาพร้อมทุกอย่างในตัว ไม่ต้องหา library เสริม
Signal Store    — NgRx รุ่นใหม่ที่ใช้ signal เป็นฐาน
Module Federation — Module Federation — การประกอบ bundle ของหลายแอป (MFE = micro-frontend) เข้าด้วยกันตอน runtime

ลึกขึ้นเล่ม — ดูแต่ละบทมี glossary เพิ่มเติม

หนังสือนี้ออกแบบมาให้ใคร

✅ Frontend developer ที่อยากลอง alternative ของ React
✅ Enterprise developer — Angular ใช้มากใน enterprise
✅ มาจาก Java/C#/.NET — Angular มี structure ชัด เหมาะกับคนชอบความเคร่งครัด/มีระเบียบ (rigorous)
✅ ทำงานในทีมใหญ่ — Angular มี opinionated convention (= มีกฎเกณฑ์/แบบแผนตายตัวที่ทุกคนในทีมต้องตาม ทำให้โค้ดของแต่ละคนหน้าตาเหมือนกัน)

🟡 Senior Angular dev (5+ ปี, on v17+) — อ่านผ่าน ๆ ได้ แต่บท 10-15 (NgRx Signal Store, MFE, BFF, Trusted Types) ยังมี modern pattern ที่อาจคุ้มอ่าน

React vs Angular — เลือกอันไหน

text

React:
- Library (เลือก lib เพิ่มเอง)
- JSX (JS-first) — เขียน HTML ในไฟล์ JavaScript โดยตรง
- Function + Hooks
- Virtual DOM
- Job market: ใหญ่กว่า (US, startups)
- Learning curve (ความยากในการเรียน): ต่ำ (ตอนเริ่ม) — สูงขึ้นเมื่อต้องเลือก lib เสริมเอง

Angular:
- Framework (มาครบ — routing, HTTP, forms, DI)
- HTML template + TypeScript class
- Component + Signal (ปี 2026)
- Real DOM + change detection
- Job market: enterprise, banking, government
- Learning curve (ความยากในการเรียน): สูง (concept เยอะ) — แต่ consistent

→ เลือกตาม job market + team

ทำไม Angular (เหตุผลเด่น)

text

✅ "Batteries included" — ลด decision fatigue (= ความเหนื่อยจากการต้องตัดสินใจเลือก library/tool หลายชิ้นเอง)
✅ TypeScript-first (จาก Google + Microsoft)
✅ Strong opinionated structure — ทีมใหญ่ทำงานเดียวกันได้
✅ DI (dependency injection) built-in — testable
✅ Reactive (RxJS + Signal) — เมื่อ state (สถานะ/ข้อมูล) เปลี่ยน หน้าจอ (UI) อัปเดตให้อัตโนมัติ ไม่ต้องสั่งวาดเอง
✅ Support window ชัดเจน — major ใหม่ทุก 6 เดือน, active 6 เดือน + LTS 12 เดือน (รวม 18 เดือนต่อเวอร์ชัน) ดู angular.dev/releases
✅ Material Design — UI library ในตัว

เครื่องมือที่ใช้

Angular 20 (signal-based, standalone, zoneless default) — เนื้อหาทดสอบครั้งสุดท้าย 2026-06
Node.js 20+
VS Code + Angular Language Service
Angular CLI (ng command)

บทเรียน

#	บท	สอนอะไร
0	Angular คืออะไร + Setup	philosophy, install, first project, CLI
1	Components + Templates	standalone component, template syntax, binding
2	Signals + State	signal (Angular 17+), computed, effect, RxJS interop
3	Services + Dependency Injection	service, DI, providers, inject()
4	Routing	router config, guards, lazy loading, route resolver
5	Forms (Template + Reactive)	template-driven, reactive forms, validation
6	HTTP + RxJS	HttpClient, observables, operators, interceptor
7	Change Detection + Performance	zone vs zoneless, OnPush, signals optimization
8	Testing	Jasmine + Jest (หรือ Web Test Runner — Karma deprecated ตั้งแต่ Angular 16 และไม่ใช่ default ใน Angular 17+), TestBed, component test, e2e
9	SSR + Modern Angular	Angular SSR, deferrable views, hydration, deployment
10	NgRx + Signal Store	NgRx Store (Redux), NgRx Signal Store (2024+), Component Store, withEntities, Effects, DevTools
11	Micro-frontends + Module Federation	Module Federation, Native Federation, shared singletons, manifest-driven, cross-framework MFE, versioning
12	Accessibility (a11y)	semantic HTML, ARIA, keyboard navigation, focus management, CDK a11y, screen reader test, WCAG 2.2
13	Security	XSS/sanitizer, CSP, Trusted Types, CSRF, JWT/cookie, OAuth+PKCE, global error handler, supply chain
14	Material + CDK	Material 3, theming + dark mode, overlay, portal, drag-drop, virtual scroll, component harness
15	i18n + Localization + RTL	@angular/localize vs Transloco, ICU plural, Intl API, RTL + CSS logical properties, SEO hreflang

วิธีอ่านที่แนะนำ

ลองเขียนทุกบท — Angular CLI ทำงานเร็ว, ลองเลย
อ่าน Angular Style Guide — angular.dev/style-guide
ใช้ Signal เป็นหลัก — Angular 17+ — RxJS เป็น tool เสริม
Standalone Component — โหมดใหม่ — ไม่ต้องเรียน NgModule ก่อน

Reading path (Beginner → Advanced)

text

มือใหม่ (มือใหม่ Angular):
  0 → 1 → 2 → 3 → 4 → 5
  สร้าง CRUD app ที่ใช้ form + HTTP + routing

กลาง (มี foundation แล้ว):
  6 → 7 → 8 → 9
  เพิ่ม HTTP, performance, testing, deployment

ขั้นสูง (เน้น production):
  10 → 11
  state management ใหญ่ + multi-team architecture

Cross-cutting (เรื่องที่เรียนควบคู่กับบทไหนก็ได้ ไม่ต้องรอเรียงลำดับ):
  12 (a11y) — เริ่มเร็ว = ฝังนิสัยถูก
  13 (security) — ก่อน deploy production
  14 (Material + CDK) — เมื่อต้องการ UI library
  15 (i18n) — เมื่อต้องรองรับหลายภาษา

Roadmap หลังจบหนังสือ

text

🎯 Phase 1 — Solidify (1-2 เดือน)
  □ Build real project — CRUD + auth + form + test
  □ Run a11y audit + security audit
  □ Deploy ขึ้น production (Vercel/Netlify)
  □ Add Sentry + Web Vitals monitoring

🚀 Phase 2 — Expand (2-3 เดือน)
  □ Learn Nx Monorepo (multi-app workspace)
  □ Custom UI library + Storybook
  □ WebSocket/SSE real-time integration
  □ Animation API deep (route transitions)
  □ Web Worker + heavy compute
  □ Custom Schematic (ng generate)

🌟 Phase 3 — Specialize (ongoing)
  □ Contribute to Angular open source
  □ Mentor / blog / talk
  □ Pick domain:
    - Performance (React-like reactivity, scheduler)
    - Architecture (DDD, micro-frontend at scale)
    - AI integration (LLM in frontend)
    - Cross-platform (Ionic, Capacitor mobile)

บทใหม่ที่ครอบคลุมใน edition นี้

ปี 2026 update — เพิ่มหัวข้อที่ enterprise/production ต้องการ:

✨ บทที่ 12 — Accessibility (a11y) — กฎหมาย EU/US บังคับ
✨ บทที่ 13 — Security — XSS, CSRF, JWT, OAuth
✨ บทที่ 14 — Material + CDK — UI library + behavior primitives
✨ บทที่ 15 — i18n + RTL — multi-language + Arabic/Hebrew

ในบทเดิมก็มี gap fill:

บท 01: Host Directive, contentChild, viewChildren
บท 02: linkedSignal, custom equality, RxJS Subject family
บท 05: Signal Forms (Angular 19/20+)
บท 06: httpResource (Angular 19+)
บท 07: NgZone.runOutsideAngular, Web Worker
บท 08: Component Harness, test signal effect, test interceptor
บท 09: GlobalErrorHandler ตัวอย่างเต็ม, PWA ngsw-config + push notification

← กลับสารบัญหลัก

🔤 Glossary · 📋 Style guide · 📅 last_verified: 2026-06-12

Angular ​

หนังสือเล่มนี้พาคุณไปถึงไหน ​

Prerequisites — ต้องรู้อะไรก่อนเปิดอ่าน ​

TypeScript Recap — Syntax ที่จะเจอในเล่มนี้ ​

Glossary — ศัพท์ที่ใช้ทั้งเล่ม ​

หนังสือนี้ออกแบบมาให้ใคร ​

React vs Angular — เลือกอันไหน ​

ทำไม Angular (เหตุผลเด่น) ​

เครื่องมือที่ใช้ ​

บทเรียน ​

วิธีอ่านที่แนะนำ ​

Reading path (Beginner → Advanced) ​

Roadmap หลังจบหนังสือ ​

บทใหม่ที่ครอบคลุมใน edition นี้ ​

Angular

หนังสือเล่มนี้พาคุณไปถึงไหน

Prerequisites — ต้องรู้อะไรก่อนเปิดอ่าน

TypeScript Recap — Syntax ที่จะเจอในเล่มนี้

Glossary — ศัพท์ที่ใช้ทั้งเล่ม

หนังสือนี้ออกแบบมาให้ใคร

React vs Angular — เลือกอันไหน

ทำไม Angular (เหตุผลเด่น)

เครื่องมือที่ใช้

บทเรียน

วิธีอ่านที่แนะนำ

Reading path (Beginner → Advanced)

Roadmap หลังจบหนังสือ

บทใหม่ที่ครอบคลุมใน edition นี้