Angular2 The Tour of Heroes tutorial に挑戦してみる 2
Angular2 The Tour of Heroes tutorial に挑戦してみる 2
- MASTER/DETAIL
https://angular.io/docs/ts/latest/tutorial/toh-pt2.html
Keep the app transpiling and running
$ npm start
Displaying heroes
Create Heroes
Create an array of ten heroes.
const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombasto' }, { id: 14, name: 'Celeritas' }, { id: 15, name: 'Magneta' }, { id: 16, name: 'RubberMan' }, { id: 17, name: 'Dynama' }, { id: 18, name: 'Dr IQ' }, { id: 19, name: 'Magma' }, { id: 20, name: 'Tornado' } ];
- const は、書き換えができない変数を設定するときに使う
- なので、var HEROESでも代用はできるはず!
- HEROES という変数に、Hero classのリストを代入するということかな?
- AppComponent classに、heroes という変数として、HEROESを代入する
- Hero class のlist>Hero[]>HEROES>heroes という順番かな。
export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; heroes = HEROES; }
Display hero names in a template
<h2>My Heroes</h2> <ul class="heroes"> <li> <!-- each hero goes here --> </li> </ul>
- class にそのままheroesって, class(Hero[])を代入できるのか!!すげーな。
List heroes with ngFor
- Modify the
- tag by adding the built-in directive
*ngFor
. - li tagを修正する。builtin directiveの
*ngFor
を使う。 - The
(*)
prefix to ngFor is a critical part of this syntax らしい。つまり*重要ってことでいいのかな。
<h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul>
- python風にすると、
for hero in heroes
って感じだな(^^) - class=badge のbadgeはあとで定義するのかしら。
Style the heroes
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; } `]
Selecting a hero
- When users select a hero from the list, the selected hero should appear in the details view. This UI pattern is known as “master/detail.” そうなんや。
Add a click event
<li *ngFor="let hero of heroes" (click)="onSelect(hero)"> ... </li>
- click した時に、onSelect() methodをcallするという意味。引数には、heroを渡す。このheroは, ngForのheroから来ている。
Add a click handler to expose the selected hero
- replace the hero property with this simple selectedHero property:
selectedHero: Hero;
- これは、selected の型の定義は、Hero class ということか。
- Add an onSelect method that sets the selectedHero property to the hero that the user clicks.
- onSelect methodを追加しよう。
onSelect(hero: Hero): void{ this.selectedHero = hero; }
- voidは、返り値がない、関数に使う。python風にいうと、def で、returnがないもの
- hero のvalueを、this.selectedHeroに代入する。python風にいうと、self.selectedHeroってところかな。
- hero: Heroってのは、よくわからんが、型の設定なのかな。hero は、Hero classで設定する。わかりやすくすると、(person: string)とかそんな感じ。
<h2>{{selectedHero.name}} details!</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div>
Hide the empty detail with ngIf
- ngIfを使う。
Don't forget the asterisk (*) in front of ngIf.
<div *ngIf="selectedHero"> <h2>{{selectedHero.name}} details!</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div> </div>
Style the selected hero
- 選択されているheroは、styleを変える
<li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li>
- これはtypescriptの構文なのか。=“条件式” は、条件式がtrueの場合に、内の処理を実行するとかそんな感じ?
- classを選択する条件式なので、
- タグ内に記載する。む〜ややこしい。
import { Component } from '@angular/core'; export class Hero { id: number; name: string; } const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombasto' }, { id: 14, name: 'Celeritas' }, { id: 15, name: 'Magneta' }, { id: 16, name: 'RubberMan' }, { id: 17, name: 'Dynama' }, { id: 18, name: 'Dr IQ' }, { id: 19, name: 'Magma' }, { id: 20, name: 'Tornado' } ]; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <div *ngIf="selectedHero"> <h2>{{selectedHero.name}} details!</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div> </div> `, 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; } `] }) export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; selectedHero: Hero; onSelect(hero: Hero): void { this.selectedHero = hero; } }
気づきなど
- :で区別する場合は、変数の型セットのことが多いのか? valiable : class(type) とか。
- void は、def のreturnが無いバージョン
- thisはself
- const は、変更不可の変数の定義