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


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

AngularJS2のquickstartを触ってみました。

とりあえずCASE STUDYの2まで触りました。途中までしかチュートリアル読んでませんがそのうち続き書きます。。。

import {Component} from 'angular2/core';

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

@Component({
    selector: 'my-app', //このコンポーネントはhtml上で<my-app></my-app>とすると呼び出せる
    template: `
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name">
    </div>`//ng-modelのバインドの書き方が変わっていることに注意。
})
export class AppComponent {
    title = 'Tour of Heroes';
    hero:Hero = {
        id: 1,
        name: 'WindStorm'
    };
}

@Componentでコンポーネント名とテンプレートを宣言して、そのテンプレートの中の変数に対して直下のAppComponentクラスで値を割り当てていく、という流れがシンプルでわかりやすいです。