Dependency Injection (DI) และ @Injectable

Dependency Injection (DI) คือ Pattern การส่ง Dependency จากภายนอกเข้าไปให้ Class แทนการสร้างเองภายใน Class ทำให้โค้ดแยกหน้าที่ชัดเจน เปลี่ยน implementation ได้ง่าย และทดสอบด้วย Mock ได้สะดวก

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["ยุคสร้างเอง / Manual Creation"]
    A["new Service()
ผูกแน่นกับ Class"]
  end
  subgraph Era2["ยุค DI Pattern / Dependency Injection"]
    B["Constructor Injection
ส่ง Dependency จากภายนอก"]
    C["Mock Friendly
ทดสอบง่ายขึ้น"]
  end
  subgraph Era3["ยุค Angular Injector / Angular DI"]
    D["@Injectable
ลงทะเบียน Service"]
    E["Injector Hierarchy
Root Module Component"]
  end
  A --> B --> C --> D --> E

แนวคิดสำคัญ

• DI ช่วยให้ Class ไม่ต้องรู้วิธีสร้าง Dependency เอง
• @Injectable({ providedIn: 'root' }) ลงทะเบียน Service ระดับ Global
• Constructor Injection เขียนได้เช่น constructor(private service: MyService) {}
• Injector Hierarchy มีลำดับจาก Root Injector ไปยัง Module Injector และ Component Injector
• providedIn: 'root' มักได้ Singleton หนึ่ง Instance ทั้งแอป
• providers ใน Component ทำให้ Component และลูกมี Service Instance เฉพาะของตัวเอง
• Mock Dependencies ทำให้ Unit Test ควบคุมพฤติกรรมภายนอกได้ง่าย

ตารางเปรียบเทียบ Provider Scope

Mermaid Diagram: Injector Hierarchy

%%{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 Injector
ตัวฉีดระดับแอป"] --> B["Module Injector
ตัวฉีดระดับโมดูล"]
  B --> C["Component Injector
ตัวฉีดระดับคอมโพเนนต์"]
  C --> D["Component Class
รับ Service ผ่าน constructor"]
  D --> E["Service Dependency
ตรรกะหรือ API"]

สมการคณิตศาสตร์: ความซับซ้อนของ Dependency

• C คือความซับซ้อนโดยประมาณของการสร้าง Dependency เอง
• d คือจำนวน Dependency ที่ Class ต้องใช้
• m คือจำนวนจุดที่ต้องแก้เมื่อเปลี่ยน implementation

Code Example

// logger.service.ts
// Service นี้ใช้บันทึกข้อความ และลงทะเบียนใน root injector
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoggerService {
  log(message: string): void {
    console.log(`[LOG] ${message}`);
  }
}

// course.component.ts
// Component รับ LoggerService ผ่าน constructor แทนการ new เอง
import { Component } from '@angular/core';
import { LoggerService } from './logger.service';

@Component({
  selector: 'app-course',
  template: `<button (click)="save()">Save</button>`
})
export class CourseComponent {
  constructor(private logger: LoggerService) {}

  save(): void {
    this.logger.log('Course saved');
  }
}

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

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

• สร้าง LoggerService
• Inject เข้าไปใน Component
• ทดลอง Mock LoggerService ใน Unit Test แบบง่าย

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