全7章立てになっているAngularチュートリアルをやってみての学び
他の章もやってみました
3. Master/Detail
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タグ内ですぐに反映されています
