はじめてAngular2を触ってみた初心者のメモ書きです。
今回からは、公式チュートリアルをチラ見しながらTODOアプリを作っていきたいと思います。
https://angular.io/docs/ts/latest/tutorial/angular.io
今回もAngular CLIの恩恵にあずかってまいります。
Windowsでの環境構築編はこちら
目次
準備
プロジェクトを生成
ng new todo-app
開発用サーバを起動
ng s
これで保存の度に自動ビルドしてくれます。
http://localhost:4200/をブラウザ上で確認
ちゃんと動いてますね。これで準備完了です。
タスクを一つ表示する
公式チュートリアルのHero Editorを見ながらやっていきます。
内容としては
のところです。
Taskクラスの作成
ng g class task
これでapp下にtask.tsが作成されました。
とりあえずIDとタスク名を持たせます。
task.ts
export class Task { id: number; name: string; }
Taskクラスをインポート
appコンポーネントにimport { Task } from './Task';を追加して、Taskクラスを使えるようにします。
適当に初期表示も決め打ちします。
app.component.ts
import { Component } from '@angular/core'; import { Task } from './Task'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'todo app'; task: Task = { id: 1, name: '田中さんにメール' }; }
チュートリアルのHero Editorほぼそのままのhtmlです。
app.component.html
<h1>{{title}}</h1> <h2>{{task.name}} の詳細</h2> <div><label>id: </label>{{task.id}}</div> <div><label>name: </label>{{task.name}}</div> <div> <label>name: </label> <input [(ngModel)]="task.name" placeholder="name"> </div>
表示ドン
双方向バインディング[(ngModel)]もオッケーです。
タスクリストを表示する
内容としては
のところです。
リスト表示（ngFor）
とりあえずリスト内容を宣言
このあたりで良いのかな
app.component.ts
export class AppComponent { title = 'todo app'; task: Task = { id: 1, name: '田中さんにメール' }; tasks = TASKS; } const TASKS: Task[] = [ { id: 11, name: '企画ロードマップ作成' }, { id: 12, name: '山田さんにメール返信' }, { id: 13, name: 'Angular2キャッチアップ' }, { id: 14, name: 'ブログ更新' }, { id: 15, name: '新卒技術研修' } ];
ngForを使ってリスト表示します。
テンプレート構文の使い方は前回のブログで！
app.component.html
<ul class="tasks"> <li *ngFor="let task of tasks"> <span class="badge">{{task.id}}</span> {{task.name}} </li> </ul>
こんな感じでリスト表示できました。
CSSを追加
チュートリアルにあるCSSの「heroes」を「tasks」に変えて使いたいので、Sassでいきます。
app.component.scssを作って呼び出します。コンパイルもしてくれるっぽい（すごい！）
app.component.ts
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] })
一気にそれっぽくなりました！
タスクを選択できるようにする
クリックイベントを追加
前回さらった(click)を使ってイベントを呼び出します。
app.component.html
<li *ngFor="let task of tasks" (click)="onSelect(task)">
スクリプト側にハンドラを追加します。
app.component.ts
selectedTask: Task; onSelect(task: Task): void { this.selectedTask = task; }
選ばれしタスクを表示（ngIf）
前回やったngIfを使います。
selectedTaskに値を入ったらば*ngIf="selectedTask"がtrueになるので、以下の要素が表示されるようになります。
app.component.html
<div *ngIf="selectedTask"> <h2>{{selectedTask.name}} details!</h2> <div><label>id: </label>{{selectedTask.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedTask.name" placeholder="name"/> </div> </div>
タスクをクリックしたら…
詳細が表示されるようになりました。
選択中のタスクに色を付ける（[class.クラス名]）
これは前回はしょってやらなかったのですが、
[class.クラス名]="式"でCSSクラスの追加/削除ができるようです。
app.component.html
<li *ngFor="let task of tasks" [class.selected]="task === selectedTask" (click)="onSelect(task)">
選択されている（"task === selectedTask"がtrue）ときはselectedクラスをaddしてくれます。
"task === selectedTask"がfalseならremoveしてくれます。（便利！）
ソースコードまとめ
感想
ngFor, ngnIf, CSSクラスの追加/削除を学びました。
今後もチュートリアルに沿ってどんどん進めていく所存です。
ちんたらやってるうちに業務で本格的に使うことになってしまいました…頑張ります…
