[AngularJS]週末でAngularJS2触ってみた part2


スクリーンショット 2016-05-13 18.22.51

https://angular.io/docs/ts/latest/tutorial/toh-pt2.html
まで

import {Component} from 'angular2/core';

export class Hero {
    id:number;
    name:string;
}

@Component({
    selector: 'my-app', 
    template: `
    <h1>{{title}}</h1>
    <h2>My Heroes</h2>
    <ul class="heroes">
      <!-- angular2での式バインドの記述方法が変わっていることに注意-->
      <li *ngFor="#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>`,
    //CSSも定義できる。ここで定義されたCSSは他のディレクティブには影響しないので、変更の影響範囲を最小化することができる。
    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';
    public heroes = HEROES;
    selectedHero:Hero;

    onSelect(hero:Hero) {
        this.selectedHero = hero;
    }
}

var 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"}
];

angular1系とディレクティブに変数をバインドする記述方法が少し変わっています。
この土日でTutorialのServicesまでやってみたので月曜・火曜あたりでチュートリアル一通り通してもう少しまとまった記事にする予定。