JavaScript
tutorial
AngularJS
チュートリアル
Angular4

Angularチュートリアル(Tour of Heroes)やってみた - The Hero Editor

全7章立てになっているAngularチュートリアルをやってみての学び

他の章もやってみました
3. Master/Detail

QuickStart

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

詳細はこちら

もしnpmコマンドが使えない場合は、インストールが必要。
- Macにnode.jsをインストールする手順。
- Node.js / npmをインストールする(for Windows)

プロジェクト構成

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. データバインディングってどんなもの?
    • 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タグ内ですぐに反映されています