-
2-8 대시보드에 주요 영웅목록 만들기앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 6. 10:18
대시보드에 주요 영웅목록 만들기
영웅 목록 중 최초 4명의 영웅을 표시하는 대시보드를 만들어 보자
컴포넌트에서 템플릿에 HTML내용을 표시하였는데, 별도의 html파일로 분리할 수 있다.
템플릿 html파일은 다음과 같다.
src/app/dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero'
import { HeroService } from './hero.service';
@Component({
selector: 'my-dashboard',
templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {
ngOnInit() {
}
}
src/app/dashboard.component.html
<h3>최고 영웅들</h3>
<div class="grid grid-pad">
<a *ngFor="let hero of heroes" class="col-1-4">
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>
</a>
</div>
*ngFor는 영웅 이름을 반복해서 표시하기 위해 사용된다.
대시보드 컴포넌트에서 HeroService를 공유해서 사용해서 최고 영웅들을 표시하자.
HeroService는 AppModule의 providers에 선언하여 모든 컴포넌트의 싱글톤 인슨턴스로 생성되어 사용될 수 있다.
대시보드 컴포넌트를 수정해 보자.
src/app/dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero'
import { HeroService } from './hero.service';
@Component({
selector: 'my-dashboard',
templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {
heroes: Hero[] = [];
constructor(private heroService: HeroService){}
ngOnInit() {
this.heroService.getHeroes()
.then(heroes => this.heroes = heroes.slice(1,5));
}
}
heroes 배열 속성을 정의
생성자에서 heroService에 HeroService를 주입
앵귤러에서 제공하는 noOnInit()라이브사이클 초기화 메소드에서 영웅들을 가져오도록 서비스 호출
Array.slice(1, 5) 메소드는 2번째 값부터 5번째 값까지 표시한다.
여기까지 구현 후 실행해 .보면 4명의 영웅이 대시보드에 나타난다.
'앵귤러 > 01 퀵스타트 & 튜토리얼' 카테고리의 다른 글
2-10 스타일 적용하기 (0) 2017.08.08 2-9 영웅 내역으로 조회 (0) 2017.08.06 2-7 경로배정에 대시보드 추가 (0) 2017.08.06 2-6 경로배정(Routing) 추가 (0) 2017.08.06 2-5 경로배정(Routing)을 위한 컴포넌트 수정 (0) 2017.08.06