[Angular] 04. Dependency Injection

 Angular 공식 문서를 실습하고 정리하는 글입니다.

 

Services

• 재사용 가능한 코드 조각으로, 앵귤러 애플리케이션의 여러 부분에 주입될 수 있다.
• 서비스는 컴포넌트와 달리 템플릿이나 뷰를 가지지 않으며, 순수 TypeScript 클래스로 구성된다.

 

서비스의 목적

1. 로직 공유: 여러 컴포넌트에서 공통으로 사용되는 로직을 서비스로 분리
2. 데이터 관리: 애플리케이션 전반에서 사용되는 데이터를 서비스에서 관리
3. 외부 통신: HTTP요청이나 다른 외부 API와의 통신을 서비스에서 처리

 

서비스의 구성 요소

1. @Injectable 데코레이터
   1. 서비스 클래스를 앵귤러 서비스로 선언한다.
   2. providedIn 속성을 통해 서비스가 애플리케이션 어느 부분에서 사용 가능한지 정의한다.
2. TypeScript 클래스
   1. 서비스의 로직 정의
   2. 메서드나 속성을 통해 필요한 기능 제공

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' }) // 'root'로 설정하여 애플리케이션 전체에서 사용 가능
export class Calculator {
  // 두 숫자를 더하는 메서드
  add(x: number, y: number) {
    return x + y;
  }
}

 

서비스의 사용

1. 사용할 서비스를 import한다.
2. inject 함수를 통해 서비스를 주입한다.
3. 주입된 서비스를 사용해 로직을 실행한다.

import { Component, inject } from '@angular/core';
import { Calculator } from './calculator'; // 서비스 import

@Component({
  selector: 'app-receipt',
  template: `<h1>The total is {{ totalCost }}</h1>`,
})
export class Receipt {
  // 서비스 주입
  private calculator = inject(Calculator);

  // 서비스 사용
  totalCost = this.calculator.add(50, 25);
}