모델 역할로서의 Service
angular cli로 서비스 생성
|
1 |
ng g service hero |
@Injectable은 서비스를 angular IOC 컨테이너에 등록하는 과정이다.
heroes mock 데이터를 리턴하는 메서드를 추가
|
1 2 3 |
getHeroes(): Hero[] { return HEROES; } |
heroes 컴포넌트에서 이제 서비스를 주입받자. 주입받는 방법은 생성자를 통해서 이미 등록된 서비스를 주입받는다.
|
1 2 3 4 5 6 7 |
selectedHero: Hero; constructor(private heroService: HeroService) { } ngOnInit() { this.heroes = this.heroService.getHeroes(); } |
그러면 angular IOC 컨테이너가 new HeroesComponent(heroService) 로 생성자함수를 통해서 컴포넌트를 생성할때 이미 등록된 heroService를 생성자로 주입하게 된다.
데이터를 Observable로 변환
|
1 2 3 4 5 |
import {Observable, of} from 'rxjs'; getHeroes(): Observable<Hero[]> { return of(HEROES); } |
이제 subscribe로 데이터를 받는다.
|
1 2 3 4 |
ngOnInit() { this.heroService.getHeroes() .subscribe(data => this.heroes = data); } |