CHAPTER 11. Services

Intro

Angular 2는 서비스 개념을 포함한다. 즉, 다른 클래스에 주입 할 수있는 클래스이다. 몇 가지 서비스는 프레임 워크에서 제공하고 일부는 공통 모듈로 제공하고 다른 서비스는 사용자가 작성할 수 있다. 우리는 헌신적인 장에서 공통 모듈에 의해 제공되는 모듈을 볼 것이다. 바로 지금, 핵심 요소를 살펴보고 우리가 어떻게 우리를 구축 할 수 있는지 알아 보자.

Title service

코어 프레임 워크는 극히 몇개의 서비스 밖에 제공하지 않는다. 응용 프로그램에서 사용하는 것은 드물다. 실제로 현재 하나 밖에 없다 :). 자주 언급 되는 질문 중 하나는 페이지의 제목을 변경하는 방법이다. 쉽게! 당신이 주입 할 수있는 Title 서비스가 있고 getter와 setter 메소드를 제공하고 있다.

import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
  selector: 'ponyracer-app',
  viewProviders: [Title],
  template: `<h1>PonyRacer</h1>`
})
export class PonyRacerAppComponent {
  constructor(title: Title) {
   title.setTitle('PonyRacer - Bet on ponies');
  }
}

이 서비스는 필요한 제목에 자동으로 title 요소를 만들고 값을 올바르게 설정한다.

Making your own service

export class RacesService {
  list() {
   return [{ name: 'London' }];
  }
}

AngularJS 1.x처럼, 서비스는 싱글 톤이므로, 같은 클래스의 인스턴스가 사방에 주입된다. 따라서 서비스는 무관 한 여러 구성 요소간에 상태를 공유하기 위한 후보이다. 서비스에 종속성이 있는 경우 그 위에 @Injectable () 장식을 추가해야 한다. 이 장식이 없으면 프레임 워크는 의존성 주입을 하지 않는다. 우리의 RacesService는 매번 같은 목록을 반환 것이 아니라 REST API에서 레이스를 꺼낼 수 있다. HTTP 요청을 실행하기 위해 프레임 워크는 Http 서비스를 제공한다. 우리의 서비스는 Http에 의존하여 race를 가져 오므로, Http 서비스를 인수로 사용하여 생성자를 추가하고 클래스에 @Injectable () 데코레이터를 추가해야 한다.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable()
export class RacesServiceWithHttp {
  constructor(private http: Http) {
  }
  list() {
   return this.http.get('/api/races');
  }
}

그런 다음 이를 구성 요소의 공급자 속성에 추가하거나 보다 현실적으로 루트 모듈의 공급자에 추가 해야한다.

@NgModule({
  imports: [BrowserModule],
  providers: [RacesServiceWithHttp],
  declarations: [PonyRacerAppComponent],
  bootstrap: [PonyRacerAppComponent]
})
export class AppModule {
}

이제는 모든 것을 테스트하는 방법을 살펴볼 필요가 있다!

Reference URL

• Become a NINJA with Angular 2

• Learn Angular 2

• Angular 2 Component

• An Introduction to Angular 2