[Docs번역-Tutorial]#3.Master.Detail(리스트만들기)

 이번에는 영웅들의 리스트를 보여주고, 사용자가 영웅을 선택하여 상세내역을 확인할 수 있도록 만들어 볼 것입니다. 

 코드는 다음과 같습니다. ( https://embed.plnkr.co/?show=preview )

파일 디렉토리

---

angular-tour-of-heroes

src

app

app.component.ts

app.module.ts

main.ts

index.html

styles.css

systemjs.config.js

tsconfig.json

node_modules ...

package.json

heroes 보여주기

---

프로젝트를 만들기 영웅들의 리스트를 보여주기 위해서는 view template를 추가하자.

Mock data로 사용할 10개의 heroes를 만들자.

src/app/app.component.ts (hero array)

1. const HEROES: Hero[] = [
2. { id: 11, name: 'Mr. Nice' },
3. { id: 12, name: 'Narco' },
4. { id: 13, name: 'Bombasto' },
5. { id: 14, name: 'Celeritas' },
6. { id: 15, name: 'Magneta' },
7. { id: 16, name: 'RubberMan' },
8. { id: 17, name: 'Dynama' },
9. { id: 18, name: 'Dr IQ' },
10. { id: 19, name: 'Magma' },
11. { id: 20, name: 'Tornado' }
12. ];

 HEROES 배열은 Hero 배열타입이다. 드디어 web service로부터 영웅들의 리스트를 받을 수 있게 됐다. 비록 mock hero들이지만...

heroes 내보내기

---

바인딩을 위한 heroes를 내보내기 위해 AppComponent에 public property를 만들자.

app.component.ts (hero array property)

heroes = HEROES;

 TypeScript가 HEROES array를 보고 추론해주기 때문에 heroes 타입은 정의하지 않았다.

hero name을 template에 보여주기

---

 정렬되지 않은 list에 hero name을 보여주기 위해서는, 다음과 같은 빈 HTML 형식을 넣어주어야 한다.

app.component.ts (heroes template)

<h2>My Heroes</h2>

<ul class="heroes"> <li> <!-- each hero goes here --> </li> </ul>

 이제 hero name들을 template에 채우기만 하면 된다.

 ngFor과 함께 hero 리스트 만들기

---

 우리의 목표는 component에 있는 heroes 배열을 template에 바인딩하고, 그 배열을 iterate하고, 각각을 보여주는 것이다. 

<li> 태그에 *ngFor built-in directive를 추가해주자.

app.component.ts (ngFor)

<li *ngFor="let hero of heroes">

<li> 태그 안에, hero 내용들을 추가해주자.

app.component.ts (ngFor template)

<li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li>

브라우저가 새로고침되면서, 영웅들의 리스트가 나올 것이다.

 style 추가하기

---

 사용자들은 어떤 영웅이 선택되었는지 hover되었는지 알아야 한다.

 component에 스타일을 추가하기 위해서는, 다음과 같은 CSS classes를 @Component decorate의 styles property에 설정해줘야 한다.

src/app/app.component.ts (styles)

styles: [` .selected { background-color: #CFD8DC !important; color: white; } .heroes { margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em; } .heroes li { cursor: pointer; position: relative; left: 0; background-color: #EEE; margin: .5em; padding: .3em 0; height: 1.6em; border-radius: 4px; } .heroes li.selected:hover { background-color: #BBD8DC !important; color: white; } .heroes li:hover { color: #607D8B; background-color: #DDD; left: .1em; } .heroes .text { position: relative; top: -3px; } .heroes .badge { display: inline-block; font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; background-color: #607D8B; line-height: 1em; position: relative; left: -1px; top: -4px; height: 1.8em; margin-right: .8em; border-radius: 4px 0 0 4px; } `]

 이 코드 때문에 file이 훨씬 길어지는데, 추후에 style들은 다른 file로 옮길 것이다.

component에 style을 적용할 때, 보통 특정 component에 scope를 두고 싶어한다. 이 스타일들은 외부 HTML에는 영향을 주지 않고 AppComponent에만 적용된다.

영웅들을 보여주기 위한 template은 다음과 같다.

src/app/app.component.ts (styled heroes)

<h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul>