[angular] 서비스 구성

26 Dec 2023

angular

Angular 애플리케이션에서 서비스(service)는 애플리케이션의 여러 부분에서 공유되는 데이터나 기능을 제공하는데 사용됩니다. 서비스는 컴포넌트와 독립적으로 구성되어 있고, 다른 서비스나 컴포넌트에서 주입되어 사용될 수 있습니다.

서비스 생성

서비스를 생성하려면 @Injectable() 데코레이터를 사용하여 해당 클래스를 선언합니다. 다음은 간단한 서비스의 예시입니다.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // 서비스의 기능과 데이터 구현
}

서비스 주입

서비스는 애플리케이션의 다른 부분에서 주입하여 사용할 수 있습니다. 주입은 주로 컴포넌트 또는 다른 서비스에서 이루어집니다.

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

@Component({
  selector: 'app-example',
  template: `
    <div>{{data}}</div>
  `
})
export class ExampleComponent {
  data: any;

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

서비스 활용

서비스는 특정 데이터를 가져오거나 가공하는 등의 기능을 구현할 수 있습니다. 이 외에도 외부 API와의 통신, 로컬 스토리지와의 상호작용 등을 통해 다양한 작업을 수행할 수 있습니다.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any;

  setData(data: any): void {
    this.data = data;
  }

  getData(): any {
    return this.data;
  }
}

서비스를 효과적으로 활용하여 애플리케이션의 다양한 부분에서 공통적으로 사용되는 기능을 구현할 수 있습니다.

더 자세한 내용은 Angular 공식 문서를 참조해 주세요.

Angular 공식 문서 - 서비스

이상으로 Angular 서비스의 구성에 대해 알아보았습니다.