#チュートリアル: TOUR OF HEROES
このチュートリアルは TypeScript で Angular2 のアプリケーションを作成する手順を説明している。
この計画は、ヒーロー事務所に所属したヒーローたち、そして彼らの派遣を望むような仕事をマネジメントする助けになるアプリケーションを作成することである。 無論、このチュートリアルで得られる進捗はほんの少しだけだと思う。 しかし、最終的な完成形にはデータドリブンアプリケーション(data-driven application)に求められる機能の大部分は持つことになるだろう。 例えば、(事務所に所属する)ヒーローの一覧を取得して表示すること、あるヒーローの情報を編集すること、あるいはヒーローのデータを表示する別の画面に遷移することなどだ。
このチュートリアルの範囲は、 Angular のうち本当に基礎的な部分だ。
- ディレクティブ(Directive) は(HTML の DOM)要素の表示を切り替えたり、ヒーローのデータを一覧表示するような、(Angular が)標準で備えているものを使う。
- コンポーネント(Component) はヒーローの詳細情報を表示したり、また、ヒーローの一覧を表示したりするときに使う。
- 片方向データバインディング(one-way data binding) は(書き換えが発生しない)リードオンリーの情報(の表示)に使う。
- 双方向データバインディング(two-way data binding) を使って、書き換え可能なフィールドでモデル(model, データモデル)を表示、更新する。
- キー入力やクリックなど、ユーザーが起こすイベントに対してはコンポーネントに定義したメソッドを結びつける。
我々はまず、マスタ情報からヒーローを選択し、詳細情報画面でそのヒーローの情報を編集することを学ぶ。
- **パイプ(Pipes)**という機能で表示するデータを成型する。
- サービス(Service) で(複数の画面で利用する)ヒーローの情報を集約、共有する。
- ルーティング(Routing) を使い、異なる画面やコンポーネント間を移動できるようにする。
Angular を使い始められるよう、これらの中核部分をしっかり学んでもらい、 それぞれが行いたいことに対して Angular でそれができるのだということを理解してくれることを願う。 発展的な内容やより高度な内容もカバーしたいが、それは(チュートリアルの)各章にリンクとして置いておこうと思う。
これがこのチュートリアルでやりたいことの図だ。トップヒーローが表示されたダッシュボード(Dashboard)画面から始まる。
ダッシュボード画面の上には「ダッシュボード」「一覧(Heroes)」のリンクがある。 このリンクをクリックすることで画面移動できる。 ダッシュボードに表示された「Magneta」というヒーローをクリックすると router が「ヒーロー詳細」画面に切り替えてくれて、そこでは我々がヒーローの名前を変更することができる。
「戻る」ボタンで「ダッシュボード」画面に戻ることができる。 上部の「ダッシュボード」リンクでも戻ることができる。 「一覧」をクリックしてみよう。 アプリケーションがヒーローの一覧マスターを表示する「一覧」画面に切り替えてくれる。
並んでいるいろいろなヒーローをクリックすると、画面下にクリックしたヒーローの(リードオンリーな)簡略情報が出てくる。 これはクリックするたびに、クリックしたヒーローの情報に変わる。
「詳細を見る( View Details )」ボタンで、選択したヒーローの「ヒーロー詳細」画面に切り替えてくれて、そこで情報を変更することができる。
これが、各画面の遷移関係を示した図だ。
これがアプリケーションの動作だ
上で紹介したアプリケーションを、順を追って一緒に作っていく。その各ステップごとに、他の無数のアプリケーションで見るような要件(要求される機能)が刺激を与えてくれるだろう。すべてのことに理由があるのだ。さらにはその過程で、Angular が持つたくさんの機能に触れていくことになるはずだ。
Let's get started!