의존성 주입(Dependency injection, DI)

기본적으로 컴포넌트는 뷰를 담당하는 컴포넌트가 대부분이지만 뷰를 가지지 않고 특정 기능만을 담당하는 컴포넌트가 있으며 이것들을 서비스컴포넌트 줄여서 서비스라고 한다.

Angular는 기능서비스를 필요로하는 컴포넌트는 기능서비스 인스턴스를 명시적으로 생성하지 않고 프레임워크가 의존성주입 시스템으로 인스턴스를 생성하여 전달하는 방식을 사용한다.

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

@Injectable({providedIn: 'root'})
export class Logger {
  writeCount(count: number) {
    console.warn(count);
  }
}

기능서비스 컴포넌트는 @Injectable데코레이터를 사용하여 의존성주입이 가능하게 된다.

import { Component } from '@angular/core';
import { Logger } from '../logger.service'; // 모듈임포트

@Component({
  selector: 'hello-world-di',
  templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent  {
  count = 0;

  constructor(private logger: Logger) { }

  onLogMe() {
    this.logger.writeCount(this.count);
    this.count++;
  }
}

기능서비스 모듈을 임포트하는 것은 기본적으로 필요하다.

constructor(private logger: Logger) { }
생성자함수에 매개변수 프로퍼티로 객체생성없이 인자로 넘겨주면 의존성주입으로 앵귤러가 객체화하여 로드한다.