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

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

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["ยุค 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

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

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

ชนิดไฟล์ ตัวอย่าง หน้าที่
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: โครงสร้างความสัมพันธ์

%%{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
แหล่งข้อมูล"]

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

F = c × 4 + s + p

Code Example

// 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();

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

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

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