Angular 2 Beta、ヒーローズツアーチュートリアルパート1

パート1 パート2 パート3 パート4

エントリー

この記事はAngular 2のドキュメントに基づいており、2つの記事、 IntroductionとHero Editorの翻訳です。

Angular 2リリースで使用されているのはベータ版です12。

ヒーローツアー：概要

私たちの素晴らしい計画は、ヒーローの募集代理店用のアプリケーションを構築することです。 ヒーローでも仕事が必要です！

もちろん、このチュートリアルでは基本的な概念のみを考慮します。 作成するものには、本格的なデータ指向のアプリケーションで見られる多くの機能があります：ヒーローのリストの受信と表示、選択したヒーローに関する情報の編集、ヒーローに関するデータの異なる表現間のナビゲーション。

ヒーローのツアーでは、Angular2の基本について説明します。 組み込みのディレクティブを使用して、要素を表示/非表示にし、ヒーローデータのリストを表示します。 ヒーローデータを表示するコンポーネントと、多くのヒーローを表示する別のコンポーネントを作成します。 読み取り専用データには一方向のデータバインディングを使用します。 編集可能なフィールドを追加して、双方向のデータバインディングを使用してモデルを更新します。 キーストロークやマウスクリックなどのカスタムイベントにコンポーネントメソッドを関連付けます。 メインリストからヒーローを選択し、詳細のプレゼンテーションでこのヒーローを編集する方法を学習します。 チャネルを使用してデータをフォーマットします。 ヒーローを集めるための共通のサービスを作成します。 そして、ルーティングを使用して、異なるビューとそのコンポーネント間をナビゲートします。

Angular2を使い始めて、Angular2が必要なことを何でもできるという自信を身に付けます。 表面的には多くのことを調べますが、詳細な研究へのリンクがあります。

サンプルアプリケーションを実行します。

ゲームの終わり

これは、このツアーで何をするかを視覚的に表したものです。 ダッシュボードビューと最もヒーロー的なヒーローから始めましょう。

パネルの上には、ダッシュボードとヒーローの2つのリンクがあります。 これらのリンクをクリックすると、ヒーローの表現間を移動できます。 しかし、「マゼンタ」という名前のヒーローをクリックすると、ルーターに「ヒーローの詳細」のビューが表示され、そこでヒーローの名前を変更できます。

「戻る」ボタンを押すと、「ダッシュボード」ビューに戻ります。 上部のリンクは、主なタイプの1つにつながる可能性があります。 「ヒーロー」をクリックすると、アプリケーションはヒーローのリストに移動します。

別のヒーローをクリックし、ミニディテールのヒーローが下に表示されたら、選択を反映します。 「詳細の表示」ボタンをクリックすると、すでにおなじみのビューが表示され、選択したヒーローの詳細を編集できます。 次のグラフは、可能なすべてのナビゲーションオプションを示しています。

動作中のアプリケーションは次のとおりです。

次へ

このヒーローのツアーを段階的に一緒に作成します。 無数のアプリケーションで満たされた要件に基づいて、各ステップを正当化します。 すべての理由があります。 そして、途中でAngular2の基本の多くに会います。

さあ始めましょう！

パート1-ヒーローエディター

ずいぶん前

すべての物語はどこかで始まります。 クイックスタートが終わるところから物語が始まります。

angular2-tour-of-heroesというフォルダーを作成し、 angular2-tour-of-heroes必要な条件、フォルダー、およびファイル構造を提供するQuickStartの手順に従います。

ただし、代わりに、 既製のQuickStartソースファイルをダウンロードできます 。

次の構造が必要です。

 angular2-tour-of-heroes app app.component.ts main.ts node_modules ... typings ... index.html package.json styles.css tsconfig.json typings.json 

コード変換とアプリケーション実行をサポート

TypeScriptコンパイラを実行して、ファイルの変更を監視し、すぐにコンパイルし、Webサーバーを起動するようにします。 これを行うには、次のように入力します。

 npm start 

このコマンドは、観察モードでコンパイラーを起動し、サーバーを起動し、ブラウザーでアプリケーションを起動し、ヒーローのツアーを作成する間に変更を追跡します。

ヒーローを見せて

ヒーローデータをアプリケーションに表示したいと思います。
AppComponent 2つのプロパティを追加しましょう。アプリケーション名のtitleプロパティと、「Windstorm」という名前のヒーローのheroプロパティです。

app.component.ts（AppComponentクラス）

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

これらの新しいプロパティのデータバインディングを追加して、 @Componentアノテーションのテンプレートを更新しています。

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

ブラウザはページを更新し、名前とヒーローを表示するはずです。

二重中括弧は、コンポーネントからヒーローの名前とプロパティを読み取って表示する必要があることをアプリケーションに伝えます。 これは、一方向データバインディングの「補間」形式です。

補間の詳細については、 データマッピングを参照してください。

ヒーローオブジェクト

現時点では、私たちのヒーローは単なる名前です。 私たちのヒーローにはもっと多くのプロパティが必要です。 主人公を文字列からクラスに変換しましょう。

idプロパティとnameプロパティを持つヒーロークラスを作成します。 これをapp.component.tsファイルの一番上、importステートメントのすぐ下にapp.component.tsます。
app.component.ts（ヒーロークラス）

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

ヒーロークラスができたので、コンポーネントのheroプロパティをリファクタリングして、タイプがHeroます。 次に、ID 1で「Windstorm」という名前で初期化します。
app.component.ts（ヒーロープロパティ）

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

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

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

ブラウザが更新され、ヒーローの名前が引き続き表示されます。

HTMLを追加します

名前を表示するのは良いことですが、ヒーローのすべてのプロパティを表示する必要があります。 idプロパティに<div>を追加し、hero nameプロパティに別の<div>を追加します。

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

ああ、テンプレート文字列は長くなっています。 テンプレートにタイプミスをするリスクを避けるために注意が必要です。
app.component.ts（AppComponentのテンプレート）

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

ヒーローを編集する

テキストボックスでヒーローの名前を編集できるようにします。
以下に示すように、ヒーローの名前を<label>から<label>および<input>に変更します。
app.component.ts（入力要素）

 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>への一方向バインディングを使用して、望ましい動作を得ることはできません。

双方向バインディング

ヒーローの名前を<input> 、変更して、ヒーローの名前に関連付けられている場所でこれらの変更を確認します。 つまり、データバインディングを双方向にする必要があります。
双方向バインディングにngModel組み込みディレクティブを使用するようにテンプレートを更新しましょう。

ngModel詳細については、「 フォームとテンプレートの構文」の章をngModel 。

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

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

ブラウザは更新中です。 私たちは再びヒーローを見ます。 ヒーローの名前を変更すると、変更がすぐに<h2>に反映されることがわかります。

歩いた道

私たちがやったことを見てみましょう。

• ヒーローツアーでは、二重補間ブレース（一方向のデータバインディングフォーム）を使用して、アプリケーション名とHeroオブジェクトのプロパティを表示します。
• テンプレートを読みやすくするために、ES2015テンプレート行を使用して複数行のテンプレートを作成しました。
• ngModel組み込まれたディレクティブを使用して、双方向のデータバインディングを<input>要素に追加することで、ヒーローの名前を同時に表示および変更できます。
• ngModelディレクティブは、変更をhero.nameの他のバンドルにも渡します。

現在app.component.tsの完全なコンテンツはapp.component.tsです。
app.component.ts

  import {Component} from 'angular2/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 { public title = 'Tour of Heroes'; public hero: Hero = { id: 1, name: 'Windstorm' }; } 

今後のパス

ヒーローツアーではヒーローを1人だけ表示しますが、ヒーローのリストを表示したいと思います。 また、ユーザーがヒーローを選択し、データを表示できるようにします。 次の章では、リストを取得し、それらをテンプレートにバインドし、ユーザーがリストで選択できるようにする方法について詳しく学習します。

最初の部分の結果：

アプリケーションを起動する、パート1