Services - nkiateam/angular-tutorial GitHub Wiki

service

Service는 어플리케이션이 필요한 값, 함수등을 결합한 것을 의미합니다. 대부분의 것들은 서비스 대상이 될 수 있습니다. 서비스는 전통적으로 잘 정의된 목적을 가진 클래스이며 특정한 일을 수행합니다. 서비스를 위해 Angular에 명시해야 할것은 없습니다. Angular는 서비스의 정의를 가지고 있지 않습니다. 서비스의 기본 클래스도 없고, 서비스를 등록해야할 장소도 없습니다. 하지만 Angular 어플리케이션에서 서비스는 주요한 요소입니다. Component는 서비스의 중요한 소비자입니다.

다음은 브라우저 콘솔에 로그를 출력하는 서비스의 예시입니다.

app.logger.service.ts(class)

export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

HeroSerivce는 히어로들을 가지고 와서 리턴을 하는 것입니다. HeroService는 Logger 서비스와 또 다른 서버 통신을 처리하는 BackendService와 연관되어 있습니다.

app.hero.service.ts(class)

export class HeroService {
  private heroes: Hero[] = [];

  constructor(
    private backend: BackendService,
    private logger: Logger) { }

  getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
      this.heroes.push(...heroes); // fill cache
    });
    return this.heroes;
  }
}

서비스는 어디든지 있을 수 있습니다. 컴포넌트 클래스는 의존적입니다. 그들은 서버로부터 데이터를 패치할 수 없고, 유저 입력을 검사할 수 없으며 콘솔에 로그를 찍지 않습니다. 이러한 작업들을 서비스에 위임합니다.

컴포넌트의 작업은 유저 경험을 활성화하거나 아닐수도 있습니다. 컴포넌트는 view와 어플리케이션 로직간의 중개자입니다. 좋은 컴포넌트는 프로퍼티의 표현과 데이터 바인딩을 위해서만 사용됩니다. 나머지 모든 것들은 서비스에 위임합니다.

Angular는 이러한 원칙을 강요하진 않습니다. 하지만 그렇지 않으면 3000줄짜리 컴포넌트가 생길 것입니다.