このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

THE HERO EDITOR

こちらの続きです。
Angular2の始め方。Angular2 公式チュートリアル – Introduction（簡単な和訳）

Setup to develop locally

実際のアプリケーションの開発は、お使いのマシンのローカル開発環境で行われます。

設定の指示に従って、「angle-tour-of-heroes」という名前の新しいプロジェクトを作成した後、ファイル構造を次のように作成します。

angular-tour-of-heroes
├── app
│ ├── app.component.ts
│ ├── app.module.ts
│ └── main.ts
├── node_modules ...
├── index.html
├── package.json
├── styles.css
├── systemjs.config.js
└── tsconfig.json

こちらの章のアプリの動作は、こちらで確認することができます。

live example.

Keep the app transpiling and running

TypeScriptコンパイラを起動し、変更を監視してからサーバーを起動する必要があります。

これを行うには、ターミナルウィンドウで次のコマンドを入力します。

$ npm start

このコマンドは watchモードでコンパイラを実行されます。

サーバー起動とブラウザでアプリケーションを起動し、引き続きヒーローチュートリアルを構築している間はアプリケーションを実行し続けます。

Show our Hero

ヒーローデータをアプリに表示。

AppComponentを更新して、アプリケーション名のタイトルプロパティと “Windstorm”というヒーローのヒーロープロパティの2つのプロパティを持ちます。

app.component.ts (AppComponent class)

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

@Componentデコレーションのテンプレートをこれらの新しいプロパティへのデータバインディングで更新します。

template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'

ブラウザが更新され、タイトルとヒーローが表示されます。

二重中括弧は、コンポーネントからタイトルとヒーローのプロパティを読み込んでレンダリングするようにアプリに指示します。

これは、一方向データバインディングの「補間」形式です。

補間の詳細については、データの表示の章を参照してください。

https://angular.io/docs/ts/latest/guide/displaying-data.html

HTMLテンプレートのコントロールをAngularコンポーネントのプロパティにバインドすることで、データを表示できます。

テンプレートは、ECMAScript 2015バックティック（ `）内の複数行の文字列です。

一重引用符（ ‘）と同じ文字ではないバックティック（ `）は、複数行にわたる文字列を構成することができるため、HTMLが読みやすくなります。

Hero object

現時点では、私たちのヒーローは単なる名前です。私たちのヒーローはより多くの特性を必要とします。ヒーローをリテラル文字列からクラスに変換しましょう。

idとnameプロパティを持つHeroクラスを作成します。

今のところこれは、app.component.tsファイルの最上部、つまりimportステートメントのすぐ下に置いてください。

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

ヒーロークラスが完成しましたので、コンポーネントのヒーロープロパティをヒーロータイプにリファクタリングしましょう。

次に、idが1で、名前が “Windstorm”で初期化します。

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

ヒーローを文字列からオブジェクトに変更したので、ヒーローのnameプロパティを参照するようにテンプレートのバインディングを更新します。

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'

ブラウザが更新され、主人公の名前が表示され続けます。

Adding more HTML

名前を表示するのは良いことですが、ヒーローのすべてのプロパティを見たいところです。

ヒーローのidプロパティには<div>を追加し、ヒーローの名前には<div>を追加します。

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'

テンプレート文字列が長くなっています。テンプレートに入力ミスをするリスクを避けるため、これを考慮する必要があります。

Multi-line template strings

文字列を連結したテンプレート速くを作成することはできますが、読みにくく、スペルミスを発生しがちです。

代わりに、ES2015とTypeScriptのテンプレート文字列機能を利用して、健全性を維持しましょう。

テンプレートの引用符をバックティックに変更し、<h1>、<h2>、<div>要素をそれぞれの行に置きます。

template:`
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`

Editing Our Hero

テキストボックスで主人公の名前を編集できるようにしたい。

ヒーローの名前<label>に<label>要素と<input>要素を以下のようにリファクタリングします。

template:`
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
  <label>name: </label>
  <input value="{{hero.name}}" placeholder="name">
</div>
`

主人公の名前が<input>テキストボックスに表示されることがブラウザでわかります。

しかし、何かが正しく感じられません。名前を変更すると、変更が<h2>に反映されていないことがわかります。

<input>への一方向バインディングでは、望ましい動作を得られません。

Two-Way Binding

ヒーローの名前を<input>に表示し、変更し、ヒーローの名前にバインドするたびにそれらの変更を表示するつもりです。つまり、双方向のデータバインディングが必要です。

フォーム入力に双方向データバインディングを使用する前に、AngularモジュールでFormsModuleパッケージをインポートする必要があります。

これをNgModuleデコレータのimport配列に追加します。この配列には、アプリケーションで使用される外部モジュールのリストが含まれています。

これで、ngModelを含むformsパッケージが含まれました。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

FormsModuleとngModelの詳細については、「フォームとテンプレートの構文」の章を参照してください。

双方向バインディングに、ngModel組込みディレクティブを使用するようにテンプレートを更新しましょう。

<input>を次のHTMLに置き換えます

<input [(ngModel)]="hero.name" placeholder="name">

ブラウザが更新され、再度確認。ヒーローの名前を編集して、<h2>で直ちに反映された変更を確認することができます。

The Road We’ve Travelled

私たちが作り出したものを取りに行きましょう。

私たちのヒーローツアーでは、ヒーローオブジェクトのアプリケーションタイトルとプロパティを表示するために、二重中括弧補間（一方向データバインディングの一種）を使用しています。

ES2015のテンプレート文字列を使用して複数行のテンプレートを作成し、テンプレートを読みやすくしました。

組み込みのngModelディレクティブを使用して<input>要素に双方向データバインディングを追加した後、ヒーローの名前を表示したり変更したりすることができます。

ngModelディレクティブは、hero.nameの他のすべてのバインディングへの変更も伝播します。

このパーツのライブサンプルを実行します。

ここには完全な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'
  };
}

The Road Ahead

私たちのヒーローツアーは英雄を1つしか表示せず、英雄のリストを表示したいのです。

また、ユーザーがヒーローを選択してその詳細を表示できるようにしたいと考えています。

リストを取得してテンプレートにバインドし、次のチュートリアルの章でヒーローを選択できるようにする方法について、さらに学習します。

Next Step

Angular2の始め方。Angular2 公式チュートリアル – Master/Detail（簡単な和訳）