Angular에서 서비스 생성하기

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

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

export class DataService {
	
}

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

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

export class DataService {
	
}

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

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

@Injectable()
export class DataService {
	
}

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

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

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

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

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

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

다음과 같은 상품 객체 배열을 반환하는 자신만의 서비스를 생성하세요:

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