reveal.js

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

Lesson 1 - Angular พื้นฐานและโครงสร้างโปรเจกต์

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

---

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

<pre class="mermaid">
%%{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
</pre>

---

## คำสั่งหลักของ 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`

---

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

1. ติดตั้ง Node.js และ npm
2. ติดตั้ง Angular CLI
3. สร้างโปรเจกต์ด้วย `ng new`
4. เข้าโฟลเดอร์โปรเจกต์
5. รันด้วย `ng serve`
6. เปิดเว็บที่ `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

<pre class="mermaid">
%%{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"]
</pre>

---

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

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
 <mi>T</mi>
 <mo>=</mo>
 <mi>n</mi>
 <mo>×</mo>
 <mo stretchy="false">(</mo>
 <msub><mi>t</mi><mi>manual</mi></msub>
 <mo>-</mo>
 <msub><mi>t</mi><mi>cli</mi></msub>
 <mo stretchy="false">)</mo>
</math>

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

---

## Code Example

```powershell
# ติดตั้ง 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`
- รันโปรเจกต์และจับภาพหน้าแรกที่เปิดได้

---

## End

<a href="/web-programming/07-angular-basic/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>