目次
チュートリアル：ヒーローズカンパニー
チュートリアルではヒーローズカンパニーが英雄の管理するアプリを作成します。
データ駆動型アプリケーションで期待している多くの機能を搭載します。ヒーローのリストを取得して表示し、選択したヒーローの詳細を編集し、ヒーローデータのさまざまなデータビュー間を自由にナビゲートします。
具体的にはこんなことができます：
- 組み込みのAngularディレクティブを使用して、要素の表示・非表示を駆使し、ヒーローデータのリストを表示します。
- 英雄の詳細情報を表示し、ヒーローの配列を表示するためにAngularコンポーネントを作成します。
- 読み取り専用データに対して一方向データバインディングを使用する。
編集可能なフィールドを追加して、双方向データバインディングでモデルを更新します。 - コンポーネントのメソッドを、キーストロークやクリックなどのユーザイベントにバインドする。
- マスターリストからヒーローを選択し、そのヒーローを詳細ビューで編集できるようにする。パイプでデータをフォーマットする。
- ヒーローを組み立てるための共有サービスを作成する。
ルーティングを使用して、さまざまなビューとそのコンポーネントをナビゲートします。
Angularはあなたが必要とすることを何でもできるようになることをお約束します。
公式のライブサンプルもみることができます。
アプリケーションシェルを作る
環境構築はクイックスタートで済んでいるので、
新しくAngularプロジェクトを作成しましょう。
ng new angular-tour-of-heroes作ったプロジェクトをブラウザに表示させます。
cd angular-tour-of-heroesng serve -oこれで編集し、保存した内容が随時ブラウザに反映されます。
アプリのタイトルを作成しよう
app.component.tsファイルを開き、タイトルを変更します。
title = 'Tour of Heroes';
次に、app.component.htmlを開き、Angular CLIで生成されたデフォルトテンプレートを削除し、タイトルのみを表示させます。
二重中括弧は、Angularの補間バインディング構文です。コンポーネントのtitleプロパティ値をHTMLヘッダータグ内に示します。
ブラウザが更新され、新しいアプリケーションのタイトルだけが表示されます。
スタイルを追加する
ほとんどのアプリは、アプリケーション全体で一貫した外観を目指しています。 CLIは、この目的のために空のstyles.cssを生成しました。アプリケーション全体のスタイルをそこに置きます。
Tour of Heroesサンプルアプリの最終的なstyles.cssの一部をここで加えてみましょう。
アプリケーションのタイトルを作成できました。
ここまでのコードを確認したい場合は公式をご覧ください。
ヒーローを追加してみよう！
アプリケーションに基本的なタイトルが追加されました。次に、ヒーロー情報を表示するための新しいコンポーネントを作成し、そのコンポーネントをアプリに追加します。
Create the heroes component
Angular CLIを使用して、heroesという名前の新しいコンポーネントを生成します。
ng generate component heroes新しいコンポーネントが作成されました。
tsファイルの中身を見てみましょう。
Componentデコレーター
AngularコアライブラリからComponentをインポートし、
import { Component, OnInit } from '@angular/core';
コンポーネントクラスに@Componentで注釈を付けます。
@Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.css']})Componentは、コンポーネントのAngularメタデータを指定するデコレータ関数です。
CLIは3つのメタデータプロパティを生成しました。
- selector：コンポーネントのCSS要素セレクタ
- templateUrl：コンポーネントのテンプレートファイルの場所
- styleUrls：コンポーネントのプライベートCSSスタイルの場所
CSS要素セレクタ「app-heroes」は、親コンポーネントのテンプレート内でこのコンポーネントを識別するHTML要素の名前です。
HTMLファイルに <app-heroes></app-heroes> を加えることで、heroes.componentを呼び出すことができます。
ngOnInit
ngOnInitはライフサイクルフックです。Angularは、コンポーネントの作成直後にngOnInitを呼び出します。初期化ロジックを置くのに適しています。
ライフサイクルを利用するとJsonの取得や関数を実行するタイミングなどを制御できるので、本格的にアプリを作成する上で便利な機能です。
Class
コンポーネントクラスをエクスポートして他の場所にインポートできます。
次のコードでインポートすることができます。
xxxxxは読み込むディレクトリからHeroesComponentの相対パスを入れます。
クラスについてもっと知りたいならこちらの記事がおすすめです。
constructor
これはTypescriptの機能です。
クラスが読み込まれるタイミングで１回限り、実行します。
ngOnInitと同じように思うかもしれません。
これらの違いはいくつかのアプリを作成する中でなんとなくわかってくることでしょう。最初のうちは、Typescriptのクラス呼び出し時に実行されるのがconstructor、コンポーネントが読み込まれた時に実行するのがngOnInitと覚えておけばいいでしょう。
詳しく知りたい方はMax NgWizard Kさんの記事をご覧ください。
このようにAngularをやるときはAngularだけでなく、Typescriptの知識が必要になることも少なくありません。
ヒーロープロパティを追加する
初期のコンポーネント構成がわかったところで、新しくプロパティを設定してみましょう。
heroes.component.tsのクラス内に以下のコードを追加します。
hero = 'Windstorm';
追加したヒーローを表示する
heroes.component.htmlテンプレートファイルを開きます。 Angular CLIによって生成されたデフォルトテキストを削除し、新しいヒーロープロパティへのデータバインドで置き換えます。
{{hero}}HeroesComponentを表示する
HeroesComponentを表示するには、それをシェルAppComponentのテンプレートに追加する必要があります。
app-heroesはHeroesComponentの要素セレクタです。そのため、AppComponentテンプレートファイルのタイトルのすぐ下に要素を追加します。
保存するとタイトルとヒーロー名の両方が表示されます。
ヒーロークラスを作成しよう
ヒーローの情報を管理します。
そのためにはどんな情報が必要かを明確にしておく方がいいでしょう。
例えば、管理番号や名前などです。
src / appフォルダ内に新規tsファイルを作成し、Heroクラスを作ります。簡単にidとnameプロパティを付けます。
HeroesComponentクラスに戻り、Heroクラスをインポートします。
コンポーネントのヒーロープロパティをHero型に リファクタリング します。ID:1と名前:「Windstorm」とし、初期化しました。
保存してみましょう。
ヒーローを文字列からオブジェクトに変更したため、ページが正しく表示されなくなりました。
ヒーローオブジェクトを表示する
IDと名前の両方を表示するには、テンプレートのバインディングを次のように更新します。
保存してみましょう。
ブラウザが更新され、ヒーローの情報が表示されます。
UppercasePipeで書式設定する
このようにhero.nameバインディングを変更します。
ヒーローの名前が大文字で表示されるようになりました。
パイプ演算子（|）の直後の補間バインディングのuppercaseは、組み込みのUppercasePipeをアクティブにします。これは大文字にするパイプです。
パイプは、文字列、通貨量、日付、およびその他の表示データをフォーマットするのに適しています。複数のビルトインパイプを備えたAngularでは、独自のパイプを作ることができます。
ヒーローを編集する
テキストボックスでヒーローの名前を編集できるようにしてみましょう。
テキストボックスにはヒーローのnameプロパティが表示され、ユーザーの入力時にそのプロパティが更新されるようにします。
サンプルを置いておきます。
テキストボックス内の文字を変えると見出しに設定されているnameプロパティが変更されるのがわかると思います。
このデータフローを自動化するには、 フォーム要素とhero.nameプロパティの間に双方向データバインディングを設定します。
双方向バインディング
HeroesComponentテンプレートの詳細領域をリファクタリングすると、次のようになります。
[(ngModel)]は、Angularの双方向データバインディング構文です。
ここではhero.nameプロパティをHTMLテキストボックスにバインドし、hero.nameプロパティからtextboxに、テキストボックスからhero.nameに戻るようにデータを双方向に流すことができます。
不足しているFormsModule
[(ngModel)]はAngularディレクティブですが、デフォルトでは使用できません。
これはオプションのFormsModuleに属し、それを使用するよう オプトイン する必要があります。
AppModule
Angularでは、アプリケーションに格部分がどのようにフィットするか、そしてアプリケーションに必要なその他のファイルやライブラリを知る必要があります。この情報はメタデータと呼ばれます。
Moduleのメタデータは@NgModuleデコレータにあります。
最も重要な@NgModuleデコレータは、トップレベルのAppModuleクラスに アノテート します。
Angular CLIは、プロジェクトを作成するときにsrc / app / app.module.tsにAppModuleクラスを生成しました。ここにFormsModuleをオプトインします。
import { FormsModule } from '@angular/forms';
その後、FormsModuleを@NgModuleメタデータのimport配列に追加します。この配列には、アプリケーションに必要な外部モジュールのリストが含まれています。
これでngModelデリバティブを使うことができるようになりました。
このようにModuleにインポートすることで使えるようになる機能はたくさんあります。
HeroesComponentを宣言する
ついでにコンポーネントが宣言されている部分も見て見ましょう。
コンポーネントは、1つのNgModuleだけで宣言されなければなりません。 HeroesComponentはコンポーネントを作成した時に自動的に@NgModulel.declarationsに追加されました。
コンポーネントはこのようにModuleで宣言します。
ヒーロー名の編集完成！！
これでヒーロー名を編集することができるようになりました。
ngModelと{{}}のデータバインドは簡単で便利な機能です。
今後使うことは増えていくでしょう。
そしてModuleの宣言をしていないために、エラーになり続けることは決して珍しいことではありません。Moduleの宣言は何をするにも重要なところです。
ここまでのコードを確認したい場合は公式をご覧ください。