Angular 애플리케이션을 빌드할 때, 의존성 주입은 매우 중요합니다. Angular는 의존성 주입을 사용하여 컴포넌트 간의 데이터를 공유하고 서비스를 효율적으로 관리합니다.

의존성 주입을 구성하려면 다음 단계를 따르면 됩니다.

1. 서비스 생성

가장 먼저, 서비스를 생성하여 애플리케이션의 여러 부분에서 사용할 수 있도록 합니다. 서비스는 @Injectable 데코레이터와 함께 Injectable 클래스로 만들어집니다.

예시:

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // 서비스 로직 구현
}

위의 코드에서 @Injectable 데코레이터는 해당 클래스가 의존성 주입의 대상이라는 것을 Angular에 알려줍니다.

2. 컴포넌트에서 사용

서비스를 사용하려면 컴포넌트의 생성자에서 해당 서비스를 주입해야 합니다. 컴포넌트 내에서 서비스를 사용하여 데이터를 가져오거나 수정할 수 있습니다.

예시:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-sample',
  template: `
    <h1>{{ data }}</h1>
  `
})
export class SampleComponent {
  data: string;

  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

위의 코드에서 SampleComponent의 생성자에서 DataService가 주입되었습니다.

의존성 주입을 통해 서비스를 컴포넌트에 주입하고 데이터를 공유함으로써 코드를 깔끔하게 유지할 수 있습니다.

의존성 주입에 대한 자세한 내용은 Angular 공식 문서를 참고하세요.