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 は、変更不可の変数の定義