QuickStart

セットアップはすごく簡単で、agunalrCLIでセットアップできた。たった３ステップでお手軽にプロジェクトを作成
詳細はこちら

もしnpmコマンドが使えない場合は、インストールが必要。

プロジェクト構成

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

1. introduction

チュートリアルでどんなものを作っていくのか等々説明

2. The Hero Editor

学んだ内容

データバインディングってどんなもの？
- 1つのJSファイルの中で定義した変数をhtmlで参照と変更することができる

1. データバインディングってどんなもの？

app.component.ts全体像

import { Component } from '@angular/core';

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

@Component({
  selector: '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>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

変数をhtmlで参照とは？

app.component.ts抜粋

export class AppComponent {
  title = 'Tour of Heroes';
}

app.component.ts抜粋

template: `<h1>{{title}}</h1>`

この場合だと、変数のtitle, heroが出力されてこんな感じの表示になる

<h1>Tour of Heroes</h1>

変数をhtmlで参照と変更とは？

ユーザーの入力した変更に同期して内容を変更させる

app.component.ts抜粋

export class AppComponent {
  title = 'Tour of Heroes';
}

app.component.ts抜粋

template: `
  <h1>{{title}}</h1>
<input [(ngModel)]="title">  `

挙動は下の感じです。inputで入力された内容がh1タグ内ですぐに反映されています