Search results for 'angualr service'

  1. 2018.05.13 -- Angular Service 만들기 (2)

Angular Service 만들기

2018. 5. 13. 19:12

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

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

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


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이 추가되었다고 하네요.

'IT Tech > Angular' 카테고리의 다른 글

Npm 거슬리는 pacakge-lock.json?  (0) 2018.09.02
Angular 업데이트(Update from 5 to 6)  (0) 2018.05.19
Angular Service 만들기  (2) 2018.05.13
Angular Domain Model  (0) 2018.04.24
Angular 테스트(Test) 하기  (0) 2018.04.11
Angular Material Table  (0) 2018.04.02

TechTrip IT Tech/Angular , , , , , , , ,

  1. Blog Icon
    임재현

    안녕하세요. 최근 많은 도움 받고있습니다.
    최근 앵귤러 카테고리를 보면서 똑같이 따라하고 있는데요.
    이 게시물에서 3.Service의 사용 챕터에서 BudgetComponent에
    this.dailyExpense = this.dailyExpenseService.getDailyExpense(new Date());
    코드를 넣는 부분이 오류가 나는데 해결방법을 알려주실 수 있을까요???

  2. 먼저 도움이 되신다니 감사합니다. ^^
    회사 업무가 바빠 개인 프로젝트 손놓고 있는지 오래인데 뜨끔하기도 하구요.
    어떤 오류가 나는지 정확히 알지 못해 어떻게 도움을 드려야할지 막막합니다.
    소스가 github에 공개가 되어 있고, 저 글을 작성할 시점의 commit ID를 공유드리는게 최선일 것 같네요. 코드 비교해 보시면서 차이를 찾아보셔야 할 듯 합니다.
    https://github.com/jsrho1023/account-book/commit/0c8f38800c0eb6e9f8da0247fa0ddd35c8f190e3
    이 시점으로 돌아가 빌드해서 돌려보니 정상적으로 동작합니다. 더 도움이 필요하시면 어떤 오류가 나는지 알려주세요. 혹시 소스코드 공유가 가능하시면 같이 봐드릴게요. 저도 공부하는 입장이라 바로 찾아낼 수 없을 수도 있습니다. ^^;;