Angular에서 서비스 생성하기

서비스에 대한 학습을 직접 만들어보면서 시작해 보겠습니다. 이를 위해 폴더 test/src/app에 파일을 만듭니다. data.service.ts. 우리의 서비스가 화면에 일부 데이터를 출력하는 역할을 담당하도록 하겠습니다.

서비스를 위한 클래스를 만들어 봅시다:

data.service.tsexport class DataService {
  
}

이제 우리는 Injectable 데코레이터가 필요합니다. 이 데코레이터를 사용하면 서비스 클래스를 컴포넌트 클래스에 주입할 수 있습니다. 주입에 대해서는 다음 강의에서 이야기하겠습니다. 지금은 필요한 데코레이터를 import 해 봅시다:

data.service.tsimport { Injectable } from '@angular/core';

export class DataService {
  
}

이 데코레이터를 우리 클래스에 적용해 봅시다:

data.service.tsimport { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  
}

이제 우리 클래스에 몇 가지 데이터가 있도록 만들어 봅시다. 일반적으로 Angular 애플리케이션에서는 서버로부터 데이터를 로드하지만, 학습 목적으로 배열을 사용하겠습니다. 비공개 속성으로 만들어 봅시다:

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];
}

이제 데이터를 가져오는 메서드를 작성해 봅시다:

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];

  getData(): string[] {
    return this.data;
  }
}

우리의 서비스가 준비되었습니다. 다음 강의에서는 이것을 컴포넌트 클래스에 연결하는 방법을 배우겠습니다.

typescript[
  {
    name: 'prod1',
    cost: 100,
  },
  {
    name: 'prod2',
    cost: 200,
  },
  {
    name: 'prod3',
    cost: 300,
  },
]