앵귤러 서비스 (Service)

앵귤러의 서비스는 템플릿과 클래스 파일이 공유하는 클래스 파일로 중복코드를 줄이고 모든 컴포넌트가 상속관계에 상관없이 정보를 공유할 수 있게 해 줍니다.

 

생성하기

서비스 생성은 /app 하위에 폴더를 만들고 클래스 파일생성 또는 아래와 같이 앵귤러 CLI를 통해 생성가능합니다 (CLI 사용을 권장). 

ng genarate service service

애플리케이션 규모가 커지면 서비스도 여러 개를 가지기 때문에 서비스 폴더를 따로 생성하는 것을 권장합니다 (아래와 같이 services/ 라고 경로를 정하고 그 아래 파일을 생성하면 자동으로 폴더 생성됨). 아래 코드는 위 커맨드의 alias버전으로 services라는 폴더 하위에 서비스를 생성합니다.

ng g s services/service

마지막으로 끝에 아래와 같이 옵션을 추가하여 클래스파일 생성 시 자동으로 생성되는 테스트 파일 생성없이 서비스를 생성도 가능합니다.

ng g s services/service --skip-tests=true

생성된 서비스 파일은 아래와 같은데요. @Injectable({providedIn:'root'})은 해당 서비스를 컴포넌트에서 접근하기 위해 필요한 메타태그이며 컴포넌트에서 접근할 필요는 없지만 다른 서비스에 접근이 필요한 경우에는 @Injectable()처럼 안에 값을 부여하지 않고 사용도 가능합니다.

// service.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class ServiceService {

  constructor() { }
}

사용하기

사용은 아래처럼 해당 서비스가 필요한 컴포넌트에서 constructor에 의존성을 주입하고 사용합니다.

// service.component.ts

import { Component, OnInit } from '@angular/core';
import { ServiceService } from 'src/app/services/service.service';

@Component({
  selector: 'app-service',
  templateUrl: './service.component.html',
  styleUrls: ['./service.component.css']
})
export class ServiceComponent implements OnInit {

  constructor(private service:ServiceService) { }

  ngOnInit(): void {
  }

}

이상으로 서비스를 사용하는 방법을 알아보았습니다.

소스코드

https://github.com/jin-co/web-mobile/tree/master/Angular/cheat-sheet/service

GitHub - jin-co/web-mobile