Angular2でTodoアプリを作る
これはAngular2を利用したTodoアプリを作成するワークショップ資料です。
このハンズオンは以下のバージョンで動作するように作成されています。ご利用の際はご注意ください。
作るもの
ワークショップでは簡単なTodoアプリを作成します。作成する機能は次の通りです。
- Todoの作成
- Todoの削除
- Todoのクローズ
- Todoの保存
Demo: https://angular2-todo.herokuapp.com/
フロントエンド開発の経験がある方は、下の[プロジェクト構成]と[作成手順]の内容に沿って自分の力で進めてください。 あまり経験の無い方は、docsに細かな手順を記載したものがありますので、見ながら進めてください。
凡例
✨ は、より深くAngular2について知るためのTipsを表します。⬛ は、ターミナルなどCUIでの操作を表します。✏️ は、ソースコードの編集を表します。
事前準備
始める前にハンズオンのscaffold(ひな形)を準備します。
それでは、scaffoldをcloneして必要なモジュールをインストールします。
git clone --depth 1 https://github.com/mitsuruog/angular2-minimum-starter.git angular2-todo
cd angular2-todo
npm install
モジュールのインストールが終わったところで、実際にアプリケーションを動かしてみましょう。
npm start
この画面が表示されたら準備はOKです。
ツール
Augular2のブラウザでのデバックを容易にするため、以下のツール(Chrome extensions)を導入することを推奨します。
プロジェクト構成
完成した場合、次のようなプロジェクト構成になる予定です。
app
├── app.component.ts
├── app.html
├── common
│ └── services
│ └── logger.service.ts
├── components
│ ├── content
│ │ ├── content.component.ts
│ │ ├── content.css
│ │ └── content.html
│ ├── footer
│ │ ├── footer.component.ts
│ │ └── footer.html
│ └── header
│ ├── header.component.ts
│ └── header.html
├── main.ts
├── models
│ └── todo.model.ts
├── services
│ └── todo.service.ts
└── system-config.js
コンポーネント関連図
Angular2はComponentベースのフレームワークです。画面を作成するために幾つかのComponentを作成していきます。次に本ワークショップで作成するCompoenntとそれらと画面との関連図を示します。
作成手順
以下の手順に沿って作成してください。
カスタマイズ
上記の機能が完成した場合は、お好みでカスタマイズしてみましょう。以下にカスタマイズの例を提示します。
- アニメーションを付ける
- Todoの保存先をAPIサーバーにする
- ユニットテストを書く
- ルーティングを追加する(例：
/completedでアクセスすると完了済みのTodoのみ表示する) - Todoにカテゴリを追加する
など
まとめ
簡単なTodo作り方についてワークショップにて体験しました。
さらにAnuglar2について学習したい場合は、まず本家のtutorialやdeveloper guideを実際にやってみることをオススメします。
ng-japan(日本Angularユーザーグループ)のslackチャネルに参加することで、技術的な質問を行うことができます。また#ng_jpでtweetすると誰かが答えてくれるかもしれません。