IT 회사에서 즐겁게 지내기!

지난 번에는 데이터를 분리했었죠.

이번에는 비즈니스 로직을 좀 나누어 보겠습니다.

(사실 비즈니스 로직이 없...)

Angular의 Service를 이용할 예정입니다.

먼저 왜 Service를 이용하는지 알아보죠.

Service는 Angular에서의 DI(Dependency Injection)을 구현하는 필수 요소입니다.

DI 패턴은 객체의 관리(변경, 테스트 등)를 용이하도록 만들어주는 방식이죠.

코드의 재사용성을 높이고, 모듈 간의 결합도를 낮추기 때문인데요.

Angular에서 DI를 용이하도록 준비해둔 것이 바로 이 Service라는 것!

그럼 역시 코드를 살펴보도록 하겠습니다.

간단하게 cli로 Service를 생성할 수 있습니다.

1. Service 생성

ng generate service {서비스이름}

(축약: ng g s {서비스이름})

아래와 같이 Injectable을 import하여 서비스가 생성됩니다.

이름을 짓고 메소드를 추가해주었구요.

import { Injectable } from '@angular/core';
import { DailyExpense } from "../domain/dailyExpense";

@Injectable()
export class DailyExpenseService {
    getDailyExpense(date:Date) {
        ....
        return dailyExpense
    }
}

2. Service의 등록

아래와 같이 생성한 Service를 AppModule에 추가합니다.

providers라는 속성에 Array 값의 하나로 넣었습니다.

(Service를 많은 Component에서 재사용하기 위함)

특정 Component에만 사용되는 경우가 있겠죠?

그러면 해당 Component의 providers에 추가하면 됩니다.

import { DailyExpenseService } from './service/daily-expense.service';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [DailyExpenseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

그러면 이제 Service를 Component에서 사용할 준비를 마쳤습니다.

3. Service의 사용

아래와 같이 import를 해주고, 생성자에 Service를 argument로 넣어줍니다.

import { DailyExpenseService } from '../service/daily-expense.service';

@Component({
    ...
})
export class BudgetComponent implements OnInit{
    ...
    dailyExpenseService: DailyExpenseSerivce;
    
    constructor(dailyExpenseService : DailyExpenseService){
        this.dailyExpenseService = dailyExpenseService;
    }

    ngOnInit(){
        ...
        this.dailyExpense = this.dailyExpenseService.getDailyExpense(new Date());
        this.dataSource = new MatTableDataSource(this.dailyExpense.consumptions);
        ...
    }
}

예상하신 대로입니다.

Service를 arg로 가진 Component에 Angular가 알아서 Service를 주입합니다.

Component에서는 Service가 가진 method들을 자유롭게 활용할 수 있구요.

굉장히 편리하죠?

Service를 분리하면서 테스트도 더욱 쉬워졌습니다.

Component를 만들 필요 없이 Service를 단위 테스트하면 되니까요.

그리고 그에 더해 여러 Component에서 함께 사용할 수 있습니다.

제가 포스팅을 시작한 Angular 5 버젼에서는 위처럼 사용하였습니다.

p.s: 6 버젼으로 업그레이드되면서 추가된 기능이있죠.

아래와 같이 service의 decorator에 provideIn 속성을 넣습니다.

import { Injectable } from '@angular/core';
import { DailyExpense } from "../domain/dailyExpense";

@Injectable({providedIn: 'root'})
export class DailyExpenseService {
    getDailyExpense(date:Date) {
        ....
        return dailyExpense
    }
}

위와 같이 하면 2번의 과정을 생략할 수 있습니다.

Scope을 Service안에서 잡아주는거죠.

좀 더 직관적인 면이 있습니다.

그리고 기능적으로는 Lazy loading이 추가되었다고 하네요.