Angular CLI: ng new, ng generate, ng serve, ng build

Angular CLI คือเครื่องมือบรรทัดคำสั่งสำหรับสร้าง จัดการ รัน ทดสอบ และ build โปรเจกต์ Angular ช่วยลดงานซ้ำและทำให้โครงสร้างโปรเจกต์เป็นมาตรฐานเดียวกัน

Timeline/ประวัติศาสตร์

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  subgraph Era1["ยุคเริ่มต้น / Early Angular"]
    A["AngularJS 1.x
Framework รุ่นแรก"]
  end
  subgraph Era2["ยุค Angular 2+ / Modern Angular"]
    B["Angular CLI
สร้าง Project มาตรฐาน"]
    C["TypeScript
ภาษาแกนหลัก"]
  end
  subgraph Era3["ยุคปัจจุบัน / Current Tooling"]
    D["Standalone + Build Tools
พัฒนาเร็วขึ้น"]
    E["Production Build
Deploy พร้อมใช้งาน"]
  end
  A --> B --> C --> D --> E

คำสั่งหลักของ Angular CLI

การติดตั้ง CLI: ใช้ npm install -g @angular/cli
ตรวจสอบเวอร์ชัน: ใช้ ng version
สร้างโปรเจกต์ใหม่: ใช้ ng new project-name
สร้างไฟล์ตามชนิด: ใช้ ng generate component/service/pipe/directive/module
รัน Dev Server: ใช้ ng serve --port 4200
Build สำหรับ Production: ใช้ ng build --configuration production
ทดสอบ Unit Test: ใช้ ng test
ตั้งค่าโปรเจกต์: ใช้ไฟล์ angular.json

ลำดับการเริ่มโปรเจกต์

ติดตั้ง Node.js และ npm
ติดตั้ง Angular CLI
สร้างโปรเจกต์ด้วย ng new
เข้าโฟลเดอร์โปรเจกต์
รันด้วย ng serve
เปิดเว็บที่ http://localhost:4200

ตารางเปรียบเทียบคำสั่ง

คำสั่ง	หน้าที่	ใช้เมื่อใด
`ng new`	สร้างโปรเจกต์	เริ่มงานใหม่
`ng generate component`	สร้าง Component	ต้องการ UI ใหม่
`ng generate service`	สร้าง Service	แยก Logic หรือ API
`ng serve`	รัน Dev Server	พัฒนาระหว่างเขียนโค้ด
`ng build`	สร้างไฟล์ Deploy	เตรียมขึ้น Production
`ng test`	รันทดสอบ	ตรวจคุณภาพโค้ด

Mermaid Diagram: Workflow ของ CLI

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
  A["ติดตั้ง CLI
Install CLI"] --> B["สร้างโปรเจกต์
ng new"]
  B --> C["สร้างส่วนประกอบ
ng generate"]
  C --> D["รันทดสอบระหว่างพัฒนา
ng serve"]
  D --> E["ทดสอบโค้ด
ng test"]
  E --> F["Build สำหรับใช้งานจริง
ng build"]

สมการคณิตศาสตร์: เวลาที่ประหยัดจาก CLI

T = n \times (t_{manual} - t_{cli})

T คือเวลารวมที่ประหยัดได้
n คือจำนวนไฟล์หรือส่วนประกอบที่สร้าง
t_manual คือเวลาที่ใช้สร้างเอง
t_cli คือเวลาที่ใช้สร้างด้วย Angular CLI

Code Example

# ติดตั้ง Angular CLI แบบ global
npm install -g @angular/cli

# ตรวจสอบเวอร์ชัน Angular CLI
ng version

# สร้างโปรเจกต์ใหม่ พร้อม routing และใช้ CSS
ng new web-learning --routing --style css

# เข้าโฟลเดอร์โปรเจกต์
cd web-learning

# สร้าง component สำหรับแสดงบทเรียน
ng generate component lesson-card

# สร้าง service สำหรับจัดการข้อมูลรายวิชา
ng generate service course

# รัน dev server ที่ port 4200
ng serve --port 4200

# ตัวอย่างการใช้งาน:
# เปิด Browser ที่ http://localhost:4200

กิจกรรมท้ายบท

สร้างโปรเจกต์ชื่อ web-course
สร้าง Component ชื่อ course-list
สร้าง Service ชื่อ course-data
รันโปรเจกต์และจับภาพหน้าแรกที่เปิดได้

กลับสัปดาห์ที่ 7