reveal.js

# โครงสร้างโปรเจกต์: Module, Component, Service, Pipe

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

**โครงสร้างโปรเจกต์ Angular** แบ่งหน้าที่ของไฟล์อย่างชัดเจน โดยให้ **Component** ดูแล UI, **Service** ดูแล Logic และข้อมูล, **Pipe** แปลงค่าก่อนแสดงผล และ **Module** รวมส่วนต่าง ๆ เข้าด้วยกัน

---

## 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["ยุค Script รวมไฟล์ / Script Era"]
 A["HTML + JS รวมกัน Low Separation"]
 end
 subgraph Era2["ยุค Component / Component Era"]
 B["Component แยก UI Reusable UI"]
 C["Service แยก Logic Business Logic"]
 end
 subgraph Era3["ยุค Modular App / Scalable Era"]
 D["Module หรือ Standalone จัดกลุ่ม Feature"]
 E["Pipe และ Directive Template Power"]
 end
 A --> B --> C --> D --> E
</pre>

---

## ส่วนประกอบหลัก

- **`src/app/app.module.ts`** คือ Root Module หลักของแอปในโครงสร้างแบบ NgModule
- **NgModule** ใช้ `declarations`, `imports`, `providers`, `bootstrap`
- **Component** คือส่วน UI ที่นำกลับมาใช้ซ้ำได้
- **Service** คือส่วนของ Business Logic และการดึงข้อมูล
- **Pipe** คือเครื่องมือแปลงข้อมูลก่อนแสดงผลใน Template
- **Directive** คือการเพิ่มพฤติกรรมให้ HTML Element
- **ไฟล์ Component** มักประกอบด้วย `.component.ts`, `.component.html`, `.component.css`, `.component.spec.ts`

---

## ตารางหน้าที่ของไฟล์

| ชนิดไฟล์ | ตัวอย่าง | หน้าที่ |
|---|---|---|
| Module | `app.module.ts` | รวม Component, Service และ Dependency |
| Component | `course-card.component.ts` | ควบคุม UI และข้อมูลของหน้าจอ |
| Template | `course-card.component.html` | โครงสร้าง HTML ของ Component |
| Style | `course-card.component.css` | CSS เฉพาะ Component |
| Service | `course.service.ts` | จัดการ Logic และข้อมูล |
| Pipe | `thai-date.pipe.ts` | แปลงข้อมูลก่อนแสดงผล |
| Spec | `course-card.component.spec.ts` | Unit Test |

---

## Mermaid Diagram: โครงสร้างความสัมพันธ์

<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["Root Module โมดูลหลัก"] --> B["Component ส่วนแสดงผล"]
 A --> C["Service ตรรกะและข้อมูล"]
 A --> D["Pipe แปลงข้อมูล"]
 A --> E["Directive เพิ่มพฤติกรรม"]
 B --> F["Template HTML หน้าตา"]
 B --> G["Style CSS รูปแบบ"]
 C --> H["API/Data Source แหล่งข้อมูล"]
</pre>

---

## สมการคณิตศาสตร์: จำนวนไฟล์ Component

- **F** คือจำนวนไฟล์โดยประมาณ
- **c** คือจำนวน Component
- **4** คือไฟล์พื้นฐานต่อ Component ได้แก่ `.ts`, `.html`, `.css`, `.spec.ts`
- **s** คือจำนวน Service
- **p** คือจำนวน Pipe

---

## Code Example

```typescript
// course.service.ts
// Service ใช้แยกข้อมูลและ logic ออกจาก Component
import { Injectable } from '@angular/core';

export interface Course {
  title: string;
  week: number;
}

@Injectable({
  providedIn: 'root'
})
export class CourseService {
  private courses: Course[] = [
    { title: 'Angular CLI', week: 7 },
    { title: 'Component', week: 7 }
  ];

// คืนรายการบทเรียนทั้งหมด
  getCourses(): Course[] {
    return this.courses;
  }
}

// ตัวอย่างการใช้งานใน Component:
// const lessons = this.courseService.getCourses();
```

```typescript
// course-list.component.ts
// Component เรียกใช้ Service เพื่อดึงข้อมูลไปแสดงใน Template
import { Component, OnInit } from '@angular/core';
import { Course, CourseService } from './course.service';

@Component({
 selector: 'app-course-list',
 template: `
 <ul>
 <li *ngFor="let course of courses">
 Week {{ course.week }}: {{ course.title }}
 </li>
 </ul>
 `
})
export class CourseListComponent implements OnInit {
 courses: Course[] = [];

constructor(private courseService: CourseService) {}

ngOnInit(): void {
    this.courses = this.courseService.getCourses();
  }
}

// ตัวอย่างการใช้งาน:
// <app-course-list></app-course-list>
```

---

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

- วาดโครงสร้างไฟล์ของโปรเจกต์ Angular ขนาดเล็ก
- ระบุว่าไฟล์ใดควรเป็น Component, Service และ Pipe
- อธิบายเหตุผลว่าทำไมไม่ควรเขียน API logic ทั้งหมดไว้ใน Component

---

## 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>