Beginner Book

โหมดมืด

บทที่ 0 — Angular คืออะไร และ Setup ​

สารบัญ | บทถัดไป →

ก่อนอ่าน — ต้องรู้อะไรมาก่อน? ​

  • HTML/CSS พื้นฐาน — รู้จัก tag, class, การจัด layout เบื้องต้น
  • JavaScript เป็นบ้าง — ตัวแปร, function, array, object (Javascript)
  • TypeScript เบื้องต้น — Angular เขียนด้วย TS ล้วน ถ้ายังไม่รู้จัก TypeScript เลย ให้หยุดอ่านบทนี้ก่อน แล้วไปอ่าน Typescript บท 0-4 ก่อน (รู้จัก type/interface แค่นั้นก็พอ) — แล้วค่อยกลับมา บทนี้มี recap สั้น ๆ ในข้อ 10 ถ้าอยากทบทวนก่อน

ไม่ต้องเคยใช้ framework frontend มาก่อนก็อ่านได้ แต่ถ้าเคยแตะ React มาจะเทียบภาพได้เร็วขึ้น (มีตารางเทียบในข้อ 4)

1. Angular คืออะไร ​

Angular คือ "frontend framework" ของ Google — เครื่องมือสำหรับสร้างหน้าเว็บที่ซับซ้อน (เช่น dashboard, ระบบหลังบ้านธนาคาร) ให้เป็นชิ้นส่วนที่ดูแลง่ายและทำงานเป็นทีมได้

🔍 framework ต่างจาก library ยังไง? — เปรียบเทียบ: library เหมือนซื้อเครื่องมือมาเป็นชิ้น ๆ แล้วเราประกอบบ้านเอง (อยากได้อะไรไปหามาเพิ่ม) ส่วน framework เหมือนซื้อบ้านสำเร็จรูปที่มีโครงมาให้แล้ว เราแค่ตกแต่งภายในตามช่องที่เขาเว้นไว้ Angular เป็นแบบหลัง คือมาพร้อม "วิธีที่ถูกต้อง" และเครื่องมือครบในตัว ไม่ต้องไปเลือกเองทีละอย่างเหมือน React ตัวอย่างเครื่องมือที่มีให้พร้อม เช่น routing (การเปลี่ยนหน้า), ฟอร์ม, และ HttpClient (การเรียกข้อมูลจากเซิร์ฟเวอร์) — ยังไม่ต้องรู้จักตอนนี้ก็ได้ จะอธิบายทีละอย่างในบทหลัง ๆ ตอนนี้แค่ผ่านตาไปก่อน

ประวัติย่อ:

  • ปี 2010 เปิดตัวเป็น AngularJS → ปี 2016 เขียนใหม่หมดเป็น Angular 2+ (คนละตัวกัน)
  • เขียนด้วย TypeScript มาตั้งแต่ต้น (ไม่ใช่ของเสริม)
  • นิยมใน Google products, ธนาคาร, ระบบ enterprise

สิ่งที่เปลี่ยนใหญ่จนถึงปี 2026 (Angular 20+) — เล่มนี้สอน "Modern Angular" ตามนี้ ไม่ใช่ของเก่า:

📝 ตอนนี้แค่จดชื่อไว้พอ ไม่ต้องเข้าใจรายละเอียด — แต่ละข้อจะอธิบายเต็ม ๆ ในบทที่อ้างถึง

  • Signals (ปี 2023) — ระบบ reactivity (การตอบสนองต่อการเปลี่ยนแปลงข้อมูลอัตโนมัติ) ตัวใหม่ (ข้อ 13)
  • Standalone Component (default ตั้งแต่ 2023) — เลิกใช้ NgModule
  • Zoneless (Angular 18+) — เลิกพึ่ง Zone.js (library เก่าที่ Angular ใช้ตรวจว่ามีอะไรเปลี่ยนแปลงบ้าง — อย่าเพิ่งสนใจ ไว้รู้จักทีหลัง)
  • Built-in @if/@for/@switch — เขียน logic ใน template ง่ายขึ้น

⚠️ ข้อมูล ณ พฤษภาคม 2026 — Angular ออกรุ่นใหม่ทุกปี tutorial ที่เก่ากว่า 2 ปีมักใช้ NgModule แบบเก่า ระวังสับสน

2. ใครใช้ Angular ​

ดูว่าใครใช้ช่วยให้เห็นว่า Angular เหมาะกับงานแบบไหน — สังเกตว่าส่วนใหญ่เป็นองค์กรใหญ่/ระบบ B2B ที่ต้องการความเป็นระเบียบและทีมหลายคนทำงานร่วมกัน:

text
Google: Search, Ads, GCP Console
Microsoft: Office 365, Outlook (parts)
Banks: HSBC, JPMorgan, Citi
Government: many countries
Forbes, Upwork, PayPal (parts)

→ Enterprise / B2B หนัก

3. ปรัชญา Angular — ทำไมถึงออกแบบแบบนี้ ​

เข้าใจ 5 หลักนี้แล้วจะเข้าใจว่าทำไม Angular ถึง "เป็นแบบนี้" — และทำไมมันเหมาะกับทีมใหญ่:

  1. Opinionated + Convention (มีแบบแผนตายตัว) — Angular มี "วิธีที่ถูก" ของมันเอง บอกชัดว่าไฟล์ควรวางตรงไหน ตั้งชื่อยังไง ผลคือคนทั้งทีมเขียนโค้ดออกมาหน้าตาคล้ายกัน เปิดโปรเจกต์ของเพื่อนแล้วอ่านรู้เรื่องทันที (ต่างจาก React ที่อิสระมากจนแต่ละทีมเขียนคนละแบบ)
  2. TypeScript-first — บังคับใช้ type ทำให้จับ bug ได้ตั้งแต่ตอนเขียน (compile-time = ก่อนรันโปรแกรม ต่างจาก runtime = ตอนรันจริง) ไม่ใช่ตอน user เจอ + เครื่องมือช่วย (autocomplete) ฉลาดขึ้น
  3. Batteries included (มาพร้อมทุกอย่าง) — routing, การเรียก API (HttpClient), ฟอร์ม, animation มาในกล่องเดียว ไม่ต้องไปไล่เลือก library เองเหมือน React ที่ต้องหาทีละตัว
  4. Dependency Injection (DI, การฉีด dependency เข้ามาให้อัตโนมัติ) — ลองนึกถึงร้าน pizza delivery: แทนที่เราจะต้องออกไปทำเตาอบเองทุกครั้งที่อยากกิน pizza เราแค่โทรสั่ง แล้วร้านก็ส่งมาให้ถึงมือ DI ทำงานแบบเดียวกัน — โค้ดของเราแค่บอกว่า "ต้องการ UserService" แล้ว Angular จัดส่ง instance (ตัวแทนของ object ที่ถูกสร้างขึ้นจริง) ที่พร้อมใช้มาให้เอง โดยไม่ต้องสร้าง object เองในที่ที่ใช้ ผลคือตอน test สลับของจริงเป็นของปลอมได้ง่าย (ลึกในบทที่ 3)
  5. Reactive — เมื่อ state (ข้อมูล) เปลี่ยน UI อัปเดตเองอัตโนมัติ ผ่าน Signal และ RxJS (library สำหรับจัดการข้อมูลแบบ stream — จะเรียนในบทที่ 6) — เราไม่ต้องสั่งวาดหน้าจอใหม่เอง

💡 สรุปง่าย ๆ: Angular แลก "อิสระ" กับ "ความเป็นระเบียบ" — เขียนตอนแรกกฎเยอะกว่า แต่พอโปรเจกต์ใหญ่และคนเยอะ ความเป็นระเบียบนี้คือสิ่งที่ช่วยให้ไม่พัง

4. Angular vs React (เปรียบเทียบ) ​

ถ้าเคยได้ยินชื่อ React มาก่อน ตารางนี้ช่วยให้เห็นภาพเร็วว่า Angular ต่างยังไง — ใจความคือ React เป็น "library" ที่อิสระแต่ต้องหา tool เองทีละชิ้น ส่วน Angular เป็น "framework" ที่มาครบแต่กฎเยอะกว่า:

📝 ไม่เคยใช้ React? ข้ามตารางนี้ได้เลย — ตารางนี้มีไว้เทียบภาพให้คนเคยใช้ React เท่านั้น ชื่อ library ที่โผล่มา (Zustand, Jasmine, Karma, Vite, CRA, Ionic) ไม่ต้องรู้จักก็ได้ ไม่ต้องจำ เดี๋ยวตัวที่ Angular ใช้จริงจะอธิบายในบทต่อ ๆ ไป

🟡 หมายเหตุ: ตารางเทียบใช้ Angular 20 ↔ React 19 (reviewed 2026-06) — React 19+ มี React Compiler (auto-memo) และ use() hook เพิ่มเข้ามา ทำให้เรื่อง state/reactivity ไม่ตรงตามตารางเสมอไป ตรวจ doc ทางการของแต่ละฝั่งก่อนตัดสินใจเลือก stack

text
                Angular (v20)        React (v19+)
Type            Framework            Library
Language        TypeScript           JS/TS
UI Markup       HTML template        JSX
Component       Class + Signal       Function + Hooks
State           Signal / RxJS         useState / useReducer / 3rd party
Reactivity      Signal (zoneless)    Re-render via diff (+ React Compiler auto-memo)
Routing         @angular/router      React Router (3rd party)
HTTP            HttpClient           fetch/axios (3rd party)
Forms           FormControl / NgModel React Hook Form (3rd party)
Style           SCSS scoped           CSS Modules / Tailwind
Testing         Jasmine + Jest (Karma deprecated v16+)   Jest / Vitest
Mobile          Ionic                React Native
CLI             @angular/cli         Vite / Next.js
Learning curve  สูง                   ต่ำ-กลาง

5. Setup ​

ก่อนเขียน Angular ต้องติดตั้ง 2 อย่าง: Node.js (ตัวรัน JavaScript บนเครื่อง) และ Angular CLI (เครื่องมือบรรทัดคำสั่งที่ช่วยสร้าง/รัน/build โปรเจกต์) ทำตามขั้นตอนนี้ทีละขั้น:

💡 npm คืออะไร? — package (แพ็กเกจ) = โค้ดสำเร็จรูปที่คนอื่นเขียนไว้แล้ว เอามาใช้ในโปรเจกต์เราได้โดยไม่ต้องเขียนเอง npm (Node Package Manager) = ตัวจัดการแพ็กเกจของ Node.js ที่ติดตั้งมาพร้อมกันเลย ไม่ต้องติดตั้งแยก

Install Node + Angular CLI ​

💡 เปิด terminal ก่อน — Windows: PowerShell หรือ Command Prompt · Mac: Terminal app · Linux: terminal ของ distro · พิมพ์คำสั่งทีละบรรทัด

วิธีติดตั้ง Node.js เลือกได้ 2 ทาง:

  • ทางง่ายสุด — โหลด installer จาก nodejs.org แล้วเลือก LTS (Long-Term Support = เวอร์ชันที่ได้รับการดูแลนาน ปลอดภัยกว่า) เวอร์ชัน 22+ (ติดตั้งครั้งเดียวจบ) — ถ้าเพิ่งเริ่มครั้งแรก ใช้วิธีนี้ก็พอ
  • ทางยืดหยุ่น (สลับเวอร์ชันได้) — ใช้ nvm (Node Version Manager) = ตัวสลับเวอร์ชัน Node เหมาะเมื่อทำงานกับโปรเจกต์หลายอันที่ใช้ Node เวอร์ชันต่างกัน
    • Windows: ติดตั้ง nvm-windows (ไฟล์ nvm-setup.exe)
    • Mac/Linux: ติดตั้ง nvm ตามคำสั่งใน README
bash
# ใช้ nvm (Windows / Mac / Linux ใช้คำสั่งพื้นฐานเดียวกัน)
# หมายเหตุ: nvm-windows และ nvm บน Mac/Linux เป็นคนละ project — feature บางอย่างเช่น .nvmrc auto-switching ไม่ทำงานบน Windows
nvm install 22
nvm use 22

# ติดตั้ง Angular CLI (ทั้งสองทางใช้คำสั่งนี้)
# -g = global: ติดตั้งให้ใช้ได้ทุกโปรเจกต์บนเครื่อง (ไม่ใช่แค่โปรเจกต์นี้)
npm install -g @angular/cli

# ตรวจสอบว่าติดตั้งสำเร็จ
ng version

ตัวอย่าง output ที่ควรเห็นถ้าสำเร็จ (เลขเวอร์ชันจะต่างไปตามวันที่ติดตั้ง):

text
Angular CLI: 20.x.x
Node: 22.x.x
Package Manager: npm 10.x.x
OS: win32 x64

Angular: (ยังไม่ได้สร้างโปรเจกต์ — ปกติ)

📝 output จริงอาจต่างจากนี้เล็กน้อย ตาม Node/npm version ที่ติดตั้ง — เลขเวอร์ชันไม่ต้องตรงกันทุกตัว ขอแค่เห็น Angular CLI: และ Node: ปรากฏขึ้นมาก็ถือว่าสำเร็จ

ถ้าขึ้น ng: command not found แปลว่า npm install ยังไม่สำเร็จ หรือ PATH ยังไม่อัปเดต (PATH = รายการโฟลเดอร์ที่ระบบจะค้นหาคำสั่ง — ปิดแล้วเปิด terminal ใหม่มักแก้ได้) — ถ้ายังไม่ได้ให้ลอง npm list -g @angular/cli ดูว่าติดตั้งสำเร็จหรือเปล่า

Create New Project ​

bash
ng new my-app

# คำถามที่ CLI จะถาม (Angular 20 — อาจมีเพิ่ม/ลดเล็กน้อยตามเวอร์ชัน):
# Which stylesheet format? (จะใช้รูปแบบ stylesheet ไหน?) → SCSS (ภาษา CSS ขยายความสามารถ — แนะนำ)
# Enable zoneless? (เปิด zoneless ไหม?) → Yes (default ของ Angular 20+)
# Enable SSR? (เปิด SSR ไหม?) → No (SSR = Server Side Rendering สร้าง HTML จากเซิร์ฟเวอร์ก่อน — เลือก No ตอนนี้ก่อน)
# Enable Server Routing? → No
# Enable AI tooling? → No
# 
# 💡 ถ้า CLI ถามคำถามเพิ่มเติมที่ไม่แน่ใจ ตอบ default (กด Enter) ไปก่อนได้ — แก้ทีหลังได้
bash
cd my-app
ng serve

# เปิดเบราว์เซอร์ไปที่ http://localhost:4200

6. Project Structure ​

พอ ng new เสร็จ จะได้โฟลเดอร์หน้าตาแบบนี้ — ไม่ต้องจำทุกไฟล์ แต่ให้รู้จัก "ไฟล์สำคัญ" ที่จะแก้บ่อย (ดูคอมเมนต์ ← กำกับ):

text
my-app/
├── angular.json              ← ตั้งค่า workspace (พื้นที่ทำงานทั้งหมด)
├── package.json               ← รายการ package ที่โปรเจกต์ต้องใช้ (dependencies)
├── tsconfig.json              ← ตั้งค่า TypeScript
├── tsconfig.app.json
├── src/
│   ├── main.ts                ← จุดเริ่มต้นของแอป (entry point)
│   ├── index.html              ← โครง HTML หลัก (shell = กรอบนอกสุดที่ Angular จะใส่เนื้อหาลงไป)
│   ├── styles.scss             ← style ที่ใช้ทั้งแอป (global)
│   ├── app/
│   │   ├── app.component.ts    ← component ราก (root)
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.routes.ts       ← ตั้งค่า routing (จับคู่ URL กับหน้า)
│   │   └── app.config.ts        ← providers ระดับแอป
│   └── assets/                  ← ไฟล์นิ่ง รูป/ฟอนต์ที่ import ผ่านโค้ด Angular (static)
└── public/                       ← ไฟล์นิ่งที่เบราว์เซอร์ต้องเรียกตรงด้วย path เดิมเป๊ะ เช่น favicon (Angular 17+)

7. First Look — main.ts ​

main.ts คือไฟล์ที่รันก่อนทุกอย่าง — หน้าที่หลักคือสั่งให้ Angular เริ่มทำงานโดยชี้ไปที่ AppComponent (component หลัก) พร้อมโหลดค่าตั้งต้นจาก appConfig:

เวลาเบราว์เซอร์เปิด index.html จะเห็นแค่กรอบ HTML เปล่า — Angular ยังไม่ได้ทำอะไรเลย พอโหลด JavaScript เสร็จ main.ts จะรันและบอกว่า "เอา AppComponent มาแปะลงใน <app-root> ใน index.html ทันที" นั่นคือจุดที่แอปเริ่มมีชีวิต หน้าจอจากที่ว่างเปล่าก็จะกลายเป็นแอปจริง ๆ

typescript
// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
    .catch((err) => console.error(err));

📝 อ่าน import ครั้งแรก? — บรรทัด import { A } from 'pkg' คือการดึงโค้ดจากไฟล์/แพ็กเกจอื่นมาใช้ (เป็น ES module syntax ของ JavaScript ยุคใหม่) — { A } = ดึงเฉพาะชื่อ A ออกมา · .catch((err) => ...) = ถ้าตอนเริ่มแอปเกิด error ให้ log ออก console (กัน error เงียบ)

→ นี่คือ จุดเริ่มต้นของแอป (entry point) — สั่งให้ Angular "ติดเครื่อง" โดยเอา AppComponent (component ราก) มาแสดง พร้อมโหลดค่าตั้งต้นจาก appConfig

app.config.ts ​

providers = รายการเครื่องมือที่ประกาศให้ทั้งแอปใช้ร่วมกันได้ เปรียบเหมือนรายการอุปกรณ์ที่จัดเตรียมไว้ที่ประตูบ้านก่อนเข้า — Angular หยิบไปใช้เองตลอดทั้งแอปโดยที่เราไม่ต้องยกซ้ำทุก component ตอนนี้แค่รู้ว่า 2 บรรทัดในไฟล์นี้คือ "เปิดระบบ routing" กับ "เปิดระบบ zoneless" แค่นั้นพอ รายละเอียดของแต่ละตัวอยู่ในบทที่ 3 (DI) และบทที่ 7 (change detection)

typescript
import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
    providers: [
        // ✅ Angular 20+ — แนะนำ zoneless เป็นค่าเริ่มต้น (default) สำหรับโปรเจกต์ใหม่
        provideZonelessChangeDetection(),
        provideRouter(routes),
    ],
};

📝 เห็น provideZonelessChangeDetection() แล้วงง? — change detection = กระบวนการที่ Angular ตรวจว่าข้อมูลเปลี่ยนแล้วต้องวาดหน้าจอใหม่ไหม (เรียนละเอียดในบทที่ 7) · zoneless = วิธีใหม่ที่เร็วกว่าและ bundle เล็กกว่า — ตอนนี้แค่รู้ว่าใส่บรรทัดนี้ในโปรเจกต์ใหม่พอ ไม่ต้องเข้าใจรายละเอียด

🟡 เลือก zoneless หรือ zone?

  • ตั้งแต่ Angular 20 LTS provideZonelessChangeDetection() stable แล้วและเป็น default ของโปรเจกต์ใหม่ (เร็วกว่า bundle เล็กกว่า)
  • ถ้าโปรเจกต์เก่ายัง depend Zone.js อยู่ ใช้ provideZoneChangeDetection({ eventCoalescing: true }) แทนได้ (eventCoalescing: true = รวม event ที่เกิดติดกันให้ตรวจครั้งเดียว ลด overhead)
  • หมายเหตุ: Angular เวอร์ชันก่อน 20 ใช้ชื่อ provideExperimentalZonelessChangeDetection() แทน — ถ้าเจอใน codebase เก่าให้รู้ว่าเป็นตัวเดียวกัน
  • ดูบทที่ 7 เรื่อง change detection ละเอียดอีกที (last reviewed: 2026-06 — ตรวจ release notes ทางการก่อนใช้)

→ ที่นี่คือที่ "ตั้งค่าระดับแอป" — บอก Angular ว่าจะใช้ระบบ routing (provideRouter) และตั้งค่าการตรวจจับการเปลี่ยนแปลง (change detection) ยังไง · ของพวกนี้เรียกว่า providers (เครื่องมือที่ทั้งแอปจะใช้ร่วมกัน) — providers ที่ระดับ app.config.ts นี้ใช้ได้ทั้งแอป ต่างจาก providers ที่ประกาศในระดับ component ซึ่งมีขอบเขตแค่ component นั้น

app.component.ts ​

📝 @Component(...) คืออะไร? — เครื่องหมาย @ คือ decorator ของ TypeScript = "ป้ายแปะ" ที่บอก Angular ว่า class ที่ตามมาเป็นอะไร พร้อมการตั้งค่า · @Component({...}) แปลว่า "class นี้คือ component, นี่คือค่าตั้งต้น"

typescript
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    standalone: true,                    // ⭐ standalone = ไม่ต้องอยู่ใน NgModule (กลุ่ม component แบบเก่า — อธิบายละเอียดในข้อ 9)
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss'    // styleUrl (เอกพจน์) = Angular 17+ · styleUrls (พหูพจน์, array) = แบบเก่า
})
export class AppComponent {
    title = 'my-app';
}

📝 ไฟล์ที่เครื่องคุณสร้างอาจหน้าตาต่างจากนี้เล็กน้อย — CLI บางเวอร์ชันสร้าง root component แบบ inline template (เขียน HTML ในไฟล์ .ts เลย) แทนที่จะแยกเป็น templateUrl/styleUrl แบบข้างบน ถือว่าปกติ ไม่ได้แปลว่า setup พัง

app.component.html ​

html
<h1>Welcome to {{ title }}!</h1>
<router-outlet></router-outlet>

→ {{ title }} = interpolation (การเอาค่าตัวแปรมาแสดงในหน้าจอ) · routing = การเปลี่ยนหน้าตาม URL โดยไม่โหลดหน้าใหม่ทั้งหมด · <router-outlet> = ช่องว่างที่ Angular เอาเนื้อหาของแต่ละหน้ามาแสดงตาม URL (ดูบทที่ 4 เรื่อง routing)

8. Angular CLI Commands ​

Angular CLI (ng) คือเครื่องมือที่ใช้บ่อยที่สุดในชีวิตประจำวัน — สร้างไฟล์ รันเซิร์ฟเวอร์ build ทั้งหมดผ่านมัน นี่คือคำสั่งที่ใช้บ่อย (ยังไม่ต้องจำหมด เดี๋ยวใช้บ่อยจะจำเอง):

bash
# โปรเจกต์
ng new <name>                # สร้างโปรเจกต์ใหม่
ng serve                      # รันเซิร์ฟเวอร์ตอนพัฒนา (dev server, ค่าเริ่มต้นพอร์ต :4200)
ng serve --port 3000          # กำหนดพอร์ตเอง
ng build                      # build สำหรับใช้งานจริง (production) → ออกที่โฟลเดอร์ dist/
ng build --watch              # โหมดเฝ้าดู (build ใหม่อัตโนมัติเมื่อแก้ไฟล์)

# สร้างไฟล์ (generate)
ng generate component user          # → ได้ user.component.ts/html/scss
ng g c user                          # คำสั่งย่อ (c = component)
ng g s user                          # service (class ที่ใช้ร่วมกัน เช่น เรียก API — บท 3)
ng g d highlight                     # directive (ตัวปรับพฤติกรรมของ HTML element เช่น เพิ่ม class อัตโนมัติ — บท 1)
ng g p title                         # pipe (ตัวแปลงค่าใน template เช่น `{{ x | date }}` — บท 1)
ng g g auth                          # guard (ฟังก์ชันคุมว่าจะเข้า route (เส้นทาง URL) ได้ไหม — บท 4)
ng g i user                          # interface (โครงร่าง type ของ object — TS)
ng g e user-role                     # enum (ชุดค่าคงที่ที่ตั้งชื่อได้ — TS)

# ระบุ path (สร้างในโฟลเดอร์ย่อย)
ng g c features/user                 # ซ้อนในโฟลเดอร์

# Test
ng test                             # unit test (ทดสอบหน่วยย่อย)
ng e2e                              # e2e (end-to-end) test = ทดสอบทั้งระบบเสมือนผู้ใช้จริง

# ตรวจคุณภาพโค้ด (lint)
ng lint

# อัปเดต
ng update                           # เช็กว่ามีอัปเดตไหม
ng update @angular/core@latest      # อัปเดตเป็นเวอร์ชันล่าสุด (หรือใส่เลขเช่น @20 เพื่อ pin)

9. Standalone Component (Angular 17+ Default) ​

เมื่อก่อน Angular บังคับให้ทุก component ลงทะเบียนใน "NgModule" ก่อนใช้ได้ — ยุ่งและงงสำหรับมือใหม่ · ตั้งแต่ Angular 17 เป็นต้นมาใช้ standalone เป็นค่าเริ่มต้นสำหรับ ng new (Angular 17 = ต้องใส่ standalone: true เอง · Angular 19+ = standalone เป็น default โดยไม่ต้องประกาศก็ได้) คือ component ประกาศ dependency ของตัวเองในตัวเลย ไม่ต้องมี NgModule:

📝 โค้ดบล็อก NgModule ด้านล่างแสดงไว้เพื่อให้รู้จักเท่านั้น — ถ้าเพิ่งเริ่ม ข้ามโค้ด NgModule แบบเก่าไปได้เลย ไม่กระทบการเรียนบทต่อไป

typescript
// วิธีเก่า (ยุค NgModule — ไม่ต้องเรียนแล้ว แสดงไว้เพื่อให้รู้จักเท่านั้น)
@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
export class AppModule { }

// วิธีใหม่ (standalone — default ใน Angular 17+, ไม่ต้องประกาศ standalone: true ใน Angular 19+)
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [/* component, directive, pipe ตัวอื่น ๆ */],
})
export class AppComponent { }

→ ผลที่ได้:

  • ไม่มี NgModule = น้อยขั้นตอน
  • โหลดทีหลังเมื่อจำเป็น (lazy load) ง่ายขึ้น — ทำให้แอปเปิดเร็วขึ้น
  • ตัดโค้ดที่ไม่ได้ใช้ออกตอน build ทำให้ไฟล์เล็กลง (tree-shake)

💡 ตอนนี้แค่รู้ว่าวิธีใหม่ (standalone) ดีกว่า — ยังไม่ต้องเข้าใจ lazy load/tree-shake ตอนนี้ก็ได้

10. TypeScript Basics (สำหรับ Angular) ​

Angular เขียนด้วย TypeScript ล้วน ถ้ายังไม่คุ้นนี่คือ syntax เท่าที่จำเป็นต้องอ่านโค้ดในเล่มนี้รู้เรื่อง (ดูเต็ม ๆ ที่ Typescript):

typescript
// ตัวแปร (variable)
let name: string = 'Anna';
const age: number = 25;
const items: string[] = ['a', 'b'];

// Interface (โครงร่างของ object ว่ามี field อะไรบ้าง)
interface User {
    id: number;
    name: string;
    email?: string;        // มีหรือไม่มีก็ได้ (optional)
}

const u: User = { id: 1, name: 'Anna' };

// Type alias (ตั้งชื่อเล่นให้ type)
type Status = 'active' | 'inactive';

// Function (ฟังก์ชัน)
function greet(name: string): string {
    return `Hello, ${name}`;
}

// Class (คลาส) — ใช้ interface User ที่ประกาศข้างบน
class UserService {
    private users: User[] = [];
    
    add(user: User): void {
        this.users.push(user);
    }
    
    get(id: number): User | undefined {
        return this.users.find(u => u.id === id);
    }
}

→ ดู Typescript สำหรับ recap เต็ม ๆ (บท 0-4 ครอบคลุมเท่าที่ต้องใช้ในเล่มนี้)

11. Hello World — Component แรก ​

ลองสร้าง component แรกจริง ๆ — สั่ง CLI ให้สร้างไฟล์ให้ แล้วดูว่าแต่ละไฟล์ทำหน้าที่อะไร:

bash
ng g c hello

→ Generate:

text
src/app/hello/
├── hello.component.ts
├── hello.component.html
├── hello.component.scss
└── hello.component.spec.ts
typescript
// hello.component.ts
import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-hello',
    standalone: true,
    templateUrl: './hello.component.html',
    styleUrl: './hello.component.scss'
})
export class HelloComponent {
    name = signal('World');
    
    changeName() {
        this.name.set('Angular');
    }
}
html
<!-- hello.component.html -->
<h2>Hello, {{ name() }}!</h2>
<button (click)="changeName()">Change</button>
scss
/* hello.component.scss */
h2 {
    color: #1976d2;
}

Use in App ​

แก้ไขไฟล์ src/app/app.component.ts ที่มีอยู่แล้ว ให้เป็นแบบนี้ (ไม่ใช่สร้างไฟล์ใหม่):

typescript
// app.component.ts
import { HelloComponent } from './hello/hello.component';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [HelloComponent],
    template: `<app-hello />`
})
export class AppComponent { }

→ รัน ng serve แล้วเปิดเบราว์เซอร์ — จะเห็น "Hello, World!" และปุ่ม Change

12. Template Syntax Preview ​

นี่คือ "ตัวอย่างน้ำจิ้ม" ของไวยากรณ์ template ที่จะใช้บ่อย — ดูผ่าน ๆ พอให้คุ้นตา เดี๋ยวลงรายละเอียดทุกตัวในบทที่ 1:

ก่อนดูโค้ด ลองทำความเข้าใจทิศทางการส่งข้อมูลของ 3 syntax นี้ก่อน เพราะหน้าตาคล้ายกันแต่ทำงานต่างกันคนละแบบ:

  • [src] = ส่งข้อมูลจาก TypeScript → หน้าจอ (ทิศทางเดียว — TypeScript เป็นต้นทาง)
  • (click) = รับเหตุการณ์จากหน้าจอ → TypeScript (ทิศทางเดียว กลับทาง — หน้าจอเป็นต้นทาง)
  • [(ngModel)] = ทั้งสองทิศพร้อมกัน เช่น input ที่พิมพ์แล้วค่าใน TypeScript เปลี่ยน และถ้าโค้ดเปลี่ยนค่า input ก็อัปเดตตาม (วงเล็บซ้อนกัน [()] ช่วยจำได้ว่ารวม [] กับ () ไว้ด้วยกัน)
html
<!-- Interpolation: เอาค่าตัวแปรมาแสดง -->
<p>{{ user.name }}</p>

<!-- Property binding: ผูกค่าตัวแปรเข้ากับ property ของ element -->
<img [src]="imageUrl">

<!-- Event binding: ผูก event (เช่น คลิก) เข้ากับ method -->
<button (click)="onClick()">Click</button>

<!-- Two-way binding: ผูกสองทาง (ค่าเปลี่ยนทั้งสองฝั่งตามกัน) -->
<!-- ⚠️ [(ngModel)] ต้อง import FormsModule เข้า component ก่อนใช้ (จะอธิบายละเอียดในบทที่ 1) -->
<input [(ngModel)]="name">

<!-- โค้ดเหล่านี้ทั้งหมดเขียนในไฟล์ .html (template) ของ component เช่น hello.component.html -->
<!-- control flow ในตัว (Angular 17+) = การเขียนเงื่อนไข/วนลูปใน template -->
@if (user) {
    <p>{{ user.name }}</p>
} @else {
    <p>Loading...</p>
}

@for (item of items; track item.id) {
    <li>{{ item.name }}</li>
}

@switch (status) {
    @case ('active') { <p>Active</p> }
    @case ('inactive') { <p>Inactive</p> }
    @default { <p>Unknown</p> }
}

→ Modern Angular ใช้ @if, @for, @switch แทน *ngIf, *ngFor เก่า

13. Signal — Reactivity ใน Angular 17+ ​

📝 ตัวอย่างน้ำจิ้ม — ดูผ่าน ๆ พอ signal/computed/effect คือหัวใจของ Angular ยุคใหม่ จะอธิบายเต็ม ๆ ในบทที่ 2 · ตอนนี้แค่รู้ว่ามีชื่อพวกนี้ ใช้ดูค่าและสั่งให้หน้าจออัปเดต ก็พอ

signal เปรียบเหมือนกระดานไวท์บอร์ดที่มีคนหลายคนมองอยู่ — พอเราลบเลขเก่าและเขียนเลขใหม่ ทุกคนที่มองอยู่จะเห็นการเปลี่ยนแปลงทันทีโดยไม่ต้องวิ่งไปบอกทีละคน count = signal(0) คือการตั้งกระดานขึ้นมา, count.update(c => c + 1) คือเขียนเลขใหม่, {{ count() }} ในหน้าจอคือคนที่มองกระดานอยู่ — Angular อัปเดตหน้าจอให้อัตโนมัติทุกครั้งที่กระดานเปลี่ยน

typescript
import { signal, computed, effect } from '@angular/core';

// ตัวอย่างย่อ — แสดงเฉพาะส่วน class เพื่ออธิบาย concept
// ในทำจริงต้องมี @Component({ selector: 'app-counter', standalone: true, template: '...' }) ครอบด้วย
export class CounterComponent {
    count = signal(0);                                   // signal ที่เขียนค่าได้ (writable)
    doubled = computed(() => this.count() * 2);          // computed = ค่าที่คำนวณมาจาก signal อื่น
    
    constructor() {
        // Effect — รันใหม่ทุกครั้งที่ signal ที่อ้างถึงข้างในเปลี่ยน
        effect(() => {
            console.log('count =', this.count());
        });
    }
    
    increment() {
        this.count.update(c => c + 1);   // หรือ this.count.set(this.count() + 1)
    }
}
html
<p>Count: {{ count() }}</p>
<p>Doubled: {{ doubled() }}</p>
<button (click)="increment()">+</button>

→ Signal คือหัวใจของ reactivity ใน Angular ยุคใหม่ — เก็บค่าที่ "เปลี่ยนแล้วหน้าจออัปเดตตาม" สังเกตว่าเวลาอ่านค่าต้องใส่วงเล็บ count() เหมือนเรียกฟังก์ชัน (เพราะมันเป็นฟังก์ชันที่คืนค่าปัจจุบันจริง ๆ) — แทน RxJS ได้ในงานส่วนใหญ่ (ลึกในบทที่ 2)

14. Routing Preview ​

Routing คือการจับคู่ URL กับ component (เปลี่ยน "หน้า" โดยไม่โหลดใหม่ทั้งหน้า) — ดูตัวอย่างพอเห็นภาพ เดี๋ยวลงลึกในบทที่ 4:

typescript
// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { AboutComponent } from './pages/about/about.component';
import { UserDetailComponent } from './pages/user-detail/user-detail.component';

export const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    
    // lazy load = โหลด component เมื่อ user เปิดหน้านั้นจริง ๆ ไม่ใช่โหลดทุกอย่างตั้งแต่เปิดแอป
    // เหมือนร้านอาหารที่ทำอาหารเมื่อสั่ง ไม่ใช่ทำทุกเมนูไว้รอตั้งแต่เช้า — แอปเปิดเร็วขึ้น
    // syntax import() ด้านล่างคือวิธี Angular ทำสิ่งนี้ ไม่ต้องจำตอนนี้ แค่รู้ว่าบรรทัดนี้มีไว้เพื่อให้แอปเปิดเร็วขึ้น (ลึกในบทที่ 4)
    {
        path: 'users',
        loadComponent: () => import('./pages/users/users.component').then(m => m.UsersComponent)
    },
    
    // พารามิเตอร์ที่เปลี่ยนได้ใน URL (dynamic param) เช่น user/42
    { path: 'user/:id', component: UserDetailComponent },
    
    // ดักทุก path ที่ไม่ตรงอันไหนเลย (wildcard) ใช้ทำหน้า 404
    { path: '**', redirectTo: '' }
];
html
<!-- app.component.html -->
<nav>
    <a routerLink="/">Home</a>
    <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

⚠️ อย่าลืม import RouterLink ใน imports ของ component ด้วย ไม่งั้น template จะ compile error ว่า Can't bind to 'routerLink':

typescript
import { RouterOutlet, RouterLink } from '@angular/router';
@Component({ imports: [RouterOutlet, RouterLink], ... })

15. Service + Dependency Injection Preview ​

📝 อย่าเพิ่งงงกับ inject() / .subscribe() / HttpClient — นี่ปูภาพคร่าว ๆ เท่านั้น เรียนเต็ม ๆ ใน บทที่ 3 (DI + service) และ บทที่ 6 (HTTP + RxJS) ตอนนี้แค่ดูให้คุ้นตา

Service คือ "แผนก" ขององค์กร — แผนก HR มีตัวเดียวในบริษัท ใครอยากรู้ข้อมูลพนักงานก็ไปถามแผนก HR ตรงนั้น ไม่ต้องสร้างแผนก HR ของตัวเอง inject(UserService) คือ "กดโทรหา HR" — Angular รู้ว่า HR อยู่ที่ไหน จัดส่ง instance มาให้เอง ไม่ต้องสร้างเอง ส่วน Observable และ .subscribe() ที่เห็นในโค้ดด้านล่างคือวิธีรับข้อมูลที่ "จะมาทีหลัง" — อ่านผ่านตาไปก่อน จะอธิบายเต็ม ๆ ในบทที่ 6

typescript
// user.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
    providedIn: 'root'           // มีตัวเดียวทั้งแอป (ไม่ว่าจะเรียกจากกี่ที่ก็ได้ตัวเดิมกลับมา) = singleton + โหลดเมื่อจำเป็น (lazy-loaded)
})
export class UserService {
    private http = inject(HttpClient);     // ⭐ ฟังก์ชัน inject() (Angular 14+)
    
    // getUsers() คืน Observable = สายข้อมูลที่รับค่าได้ทีหลัง (จะเรียนละเอียดในบทที่ 6)
    getUsers() {
        return this.http.get<User[]>('/api/users');
    }
}
typescript
// component — @Component decorator ถูกละไว้เพื่อความสั้น ในทำจริงต้องมีด้วย
import { Component, signal, inject, OnInit } from '@angular/core';
import { UserService } from './user.service';

// implements OnInit = บอก TypeScript ให้ตรวจว่า class มี ngOnInit() จริง (แนะนำใส่เสมอ)
export class UserListComponent implements OnInit {
    private userService = inject(UserService);
    
    users = signal<User[]>([]);
    
    // ngOnInit() = method พิเศษที่ Angular เรียกอัตโนมัติตอน component เริ่มทำงาน
    // (เป็น lifecycle hook — ดูบทที่ 1)
    ngOnInit() {
        // .subscribe() = การลงทะเบียนรับค่าจาก Observable
        // ⚠️ .subscribe() โดยไม่มี cleanup = เสี่ยง memory leak — วิธีที่ถูก (toSignal() หรือ takeUntilDestroyed()) จะอธิบายในบทที่ 6
        this.userService.getUsers().subscribe(users => {
            this.users.set(users);
        });
    }
}

→ inject() คือวิธีดึง service มาใช้แบบใหม่ (สะอาดกว่าการรับผ่าน constructor แบบเก่า) · เรียก inject(UserService) แล้วได้ instance ที่ Angular เตรียมไว้ให้ใช้ได้เลย (เรื่อง DI เต็ม ๆ อยู่บทที่ 3)

16. Tools + Extensions ​

ติดตั้งเครื่องมือพวกนี้ตั้งแต่ต้นจะทำงานสบายขึ้นมาก — ตัวสำคัญสุดคือ Angular Language Service (language service = ส่วนขยายของ editor ที่เข้าใจภาษา/framework นั้น ๆ ทำให้ autocomplete และแจ้ง error ได้ฉลาดขึ้น — ของ Angular ช่วย autocomplete + เตือน error ใน template):

VS Code ​

💡 VS Code (Visual Studio Code) = code editor ฟรีของ Microsoft ที่นิยมใช้กับ Angular มากที่สุด ดาวน์โหลดได้ที่ code.visualstudio.com

  • Angular Language Service (official) — autocomplete และ type check ใน template
  • Angular Snippets — code shortcuts ย่อโค้ดที่พิมพ์บ่อย
  • Prettier (จัดรูปแบบโค้ดอัตโนมัติ) — format code ให้เรียบร้อยเมื่อ save
  • ESLint + Angular config (ตรวจหาโค้ดที่มีปัญหา/ไม่ตรงมาตรฐาน)

Browser ​

  • Angular DevTools — inspect component tree, profile

CLI Plugins ​

bash
# Angular Material (UI components ของ Google — มี button/dialog/table สำเร็จรูป)
ng add @angular/material

# Tailwind CSS (framework CSS ที่เขียน class สั้น ๆ เช่น `text-red-500` แทนที่จะเขียน CSS เอง)
# ดูวิธีติดตั้งล่าสุดที่ https://tailwindcss.com/docs/installation/framework-guides/angular
# (วิธีขึ้นกับ Tailwind version — ตรวจสอบก่อนติดตั้งเสมอ)
npm install -D tailwindcss postcss autoprefixer

# Storybook (เครื่องมือ preview/ทดสอบ component แยกจากแอป)
ng add @storybook/angular

💡 ยังไม่รู้จัก Tailwind/Storybook ก็ไม่เป็นไร — ค่อยเพิ่มทีหลังเมื่อต้องใช้

17. Generate App Examples ​

ng new มี option ปรับแต่งได้ตอนสร้าง — นี่คือรูปแบบที่ใช้บ่อย ตั้งแต่แอปเดี่ยวธรรมดาไปจนถึง workspace แบบ monorepo (หลายแอป/library ในที่เดียว):

bash
# แอปเดี่ยวธรรมดา
ng new simple-app

# พร้อม SCSS และ routing
ng new my-app --style=scss --routing=true

# workspace แบบหลายแอป (monorepo = หลายโปรเจกต์ในที่เดียว — เหมาะเมื่อต้องการแชร์ code ร่วมกันระหว่างหลายแอป)
ng new workspace --create-application=false
cd workspace
ng generate application app1
ng generate library shared

18. Angular Style Guide — สำคัญ ​

Angular มี "คู่มือสไตล์" ทางการที่ทีมส่วนใหญ่ยึดตาม — ทำให้โค้ดของทุกคนหน้าตาเหมือนกัน อ่านง่าย จุดสำคัญคือ 1 ไฟล์ทำหน้าที่เดียว + ตั้งชื่อตาม convention + แยกโฟลเดอร์ตาม feature:

https://angular.dev/style-guide

text
✅ One responsibility per file
✅ Naming convention:
   - Components: PascalCase (ตัวอักษรแรกทุกคำพิมพ์ใหญ่) + Component suffix เช่น UserComponent
   - Services: PascalCase + Service suffix เช่น UserService
   - Files: kebab-case (ใช้ขีดกลางแทนเว้นวรรค) + dot suffix เช่น
     user.component.ts
     user.service.ts
     user.model.ts
✅ Folder per feature
✅ Lazy load feature modules/routes
✅ DI via `inject()` function (preferred ใน modern Angular) — constructor injection ยังใช้ได้แต่ไม่ใช่ default style แล้ว

19. Recommended Folder Structure ​

พอโปรเจกต์โตขึ้น การจัดโฟลเดอร์ดี ๆ ช่วยให้หาของเจอ โครงที่นิยมคือแบ่งเป็น 3 ส่วน: core (service ที่มีตัวเดียวทั้งแอป), shared (ของใช้ซ้ำ), features (แยกตามฟีเจอร์):

text
src/app/
├── core/                    ← service ที่มีตัวเดียวทั้งแอป (singleton services)
│   ├── auth/
│   ├── http/
│   └── ...
├── shared/                  ← component/pipe ที่ใช้ซ้ำได้ (reusable)
│   ├── components/
│   ├── pipes/
│   └── directives/
├── features/                ← แบ่งตาม feature (feature modules)
│   ├── user/
│   │   ├── components/
│   │   ├── services/
│   │   ├── models/
│   │   └── user.routes.ts
│   └── order/
├── app.component.ts
├── app.config.ts
└── app.routes.ts

→ โครงแบบ Domain-driven (แบ่งตาม domain/ฟีเจอร์) — รองรับโปรเจกต์ขนาดใหญ่

20. Common Mistakes (มือใหม่) ​

5 ข้อนี้คือกับดักที่มือใหม่ Angular ตกบ่อยสุด — อ่านไว้ก่อนจะช่วยให้ debug ได้เร็วเวลาเจอจริง:

❌ Forget @Component decorator ​

typescript
// ❌
export class HelloComponent { }

// ✅
@Component({...})
export class HelloComponent { }

❌ Import in wrong place ​

typescript
// ❌ standalone ต้องประกาศ imports ไว้ใน @Component
@Component({...})
export class App {}
import { FormsModule } from '@angular/forms';    // วางไว้นอก decorator (ผิด)

// ✅
@Component({
    standalone: true,
    imports: [FormsModule, ...]
})
export class App {}

❌ Forget Standalone (เฉพาะ Angular 14-18) ​

typescript
// แบบเก่าที่ไม่ใช่ standalone
@Component({...})
export class HelloComponent { }
// ใน Angular 14-18: ถ้าไม่มี standalone: true, component ต้องถูกประกาศใน NgModule ก่อนใช้งาน
// ถ้าลืมประกาศจะเกิด Error: Component X is not part of any NgModule

// ✅ เพิ่ม standalone: true
@Component({
    standalone: true,
    ...
})

💡 ใน Angular 19+ standalone เป็น default แล้ว — ไม่ต้องประกาศ standalone: true ก็ทำงานได้ ปัญหานี้แทบไม่เจอในโปรเจกต์ใหม่ · ใส่ไว้ก็ไม่ผิด เป็นการบอกเจตนาให้ชัด

❌ Not using signal() ​

typescript
// ❌ แบบเก่า: property ธรรมดา (เปลี่ยนแล้วหน้าจอไม่อัปเดตอัตโนมัติ)
export class App {
    count = 0;
}

// ✅ Signal — reactive (เปลี่ยนแล้วหน้าจอตามเอง)
export class App {
    count = signal(0);
}
// เวลาใช้ต้องเขียน count() — เหมือนเรียกฟังก์ชัน

❌ Forget track in @for ​

html
<!-- ❌ @for บังคับต้องมี track (ตัวบอกว่าจะแยกแต่ละ item ด้วยอะไร) -->
@for (item of items) {
    <li>{{ item.name }}</li>
}

<!-- ✅ -->
@for (item of items; track item.id) {
    <li>{{ item.name }}</li>
}

21. Resources ​

แหล่งเรียนต่อที่เชื่อถือได้ — เริ่มจาก angular.dev (เอกสารทางการ มี tutorial แบบกดเล่นได้) เป็นหลัก ที่เหลือเสริมตามชอบ:

Official ​

Books ​

  • "Angular Up & Running" (O'Reilly)
  • "Pro Angular" (Apress)

Video ​

  • YouTube: Angular University, Decoded Frontend, Joshua Morony

Community ​

  • /r/angular
  • angular.dev/discord
  • Stack Overflow

Newsletter ​

  • ng-newsletter
  • Angular Espresso
  • This Week in Angular

22. Modern Angular Timeline ​

Angular เปลี่ยนเร็วมาก timeline นี้ช่วยให้รู้ว่า feature ไหนมาเวอร์ชันไหน — สำคัญตอนอ่าน tutorial เก่า จะได้รู้ว่าอันไหน "ของเก่าที่เลิกใช้แล้ว":

text
v13 (2021): Removed View Engine
v14 (2022): Standalone APIs preview
v15 (2022): Standalone GA
v16 (2023): Signal preview
v17 (2023): New control flow (@if/@for), signal stable
v18 (2024): Zoneless preview, signal-based forms
v19 (Nov 2024): Signal forms preview, more zoneless
v20 (2025): Zoneless stable, signal everywhere
v21+ (2026): Continued evolution — ตรวจ release notes ทางการก่อนใช้ feature ใหม่

(timeline last reviewed: 2026-06 — Angular ปล่อย major ทุก 6 เดือน, ดู angular.dev/releases สำหรับ list ล่าสุด)

→ Angular เปลี่ยนเร็วมาก — อย่าเชื่อ tutorial เกิน 2 ปี

23. Checkpoint ​

อ่านอย่างเดียวลืมเร็ว — ลองลงมือทำ 5 ข้อนี้ด้วยตัวเอง (อย่าข้าม) แล้วคุณจะ setup + สร้าง component แรกได้จริง:

🛠️ Checkpoint 0.1 — Setup

bash
nvm install 22
npm install -g @angular/cli
ng new hello-angular --style=scss --routing=true
cd hello-angular
ng serve

เปิดเบราว์เซอร์ไปที่ http://localhost:4200

🛠️ Checkpoint 0.2 — Hello Component

  • Generate hello component
  • Add to AppComponent
  • See "Hello, World!" in browser

🛠️ Checkpoint 0.3 — Add Routing (ทดลองดู — ถ้าทำไม่ได้ไม่เป็นไร routing จะสอนครบในบทที่ 4)

  • Create home + about components
  • เพิ่ม routes (ดูตัวอย่างที่ข้อ 14 ของบทนี้)
  • นำทางระหว่างหน้าด้วย <a routerLink>

🛠️ Checkpoint 0.4 — Signal Counter

  • Component with count = signal(0)
  • Buttons + / -
  • Display count() in template

🛠️ Checkpoint 0.5 — Explore CLI
ลองใช้:

  • ng g c (component)
  • ng g s (service)
  • ng build (production)
  • ดูไฟล์ output ในโฟลเดอร์ dist/

24. สรุปบท ​

ทบทวนสิ่งสำคัญของบทนี้ก่อนไปต่อ — ถ้าข้อไหนยังไม่ชัด ย้อนกลับไปอ่านหัวข้อนั้นอีกรอบ:

✅ Angular = "batteries-included" framework — TypeScript-first
✅ ใช้ใน enterprise + Google products
✅ Modern Angular (17+): Signals, Standalone, @if/@for
✅ Setup: npm install -g @angular/cli → ng new app
✅ CLI: ng serve, ng build, ng generate component <name>
✅ Project structure: standalone (no NgModule needed)
✅ Template syntax: {{ }}, [prop], (event), [(ngModel)], @if, @for
✅ Signal = reactivity primitive (Angular 17+)
✅ Service + DI = @Injectable({providedIn: 'root'}) + inject(Service)
✅ Routing = provideRouter(routes) + <router-outlet>
✅ Style guide สำคัญ — Angular มี opinionated convention

บทถัดไป → Components + Templates

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