【20160819更新】rc.5対応した記事を書きました。Angular 2入門：NgModelに触れてみる [rc.5対応]
この記事で書かれている内容は古いため参考にされないようご注意ください。
おはようございます。今井です。
最近は、ng-kyotoというAngularユーザーコミュニティでオーガナイザーをさせていただいております。Angular 2というこれまでのAngular JSとは全く異なる（！？）フレームワークがそろそろβ版になるということで、初めて触れる次第です。
私が初めてAngular JSと触れた時に一番印象的だったのは双方向バインディングだったような気がします。その双方向バインディングがAngular 2でどうなったのかを見てみたいと思います。
注意：この記事では、Angular 1.xをAngular JS。Angular 2.xをAngular 2と呼称します。
#前提
- すでにAngularJSにある程度触れられている方を対象とします。
- @armorik83氏の記事を読まれた前提で話を進めていきます。
- この記事時点でのAngular2のバージョンは2.0.0-alpha.47です。
#公式サイト
#ModelからViewへ
MVCモデルでいうModelからViewへ値を反映させてみます。
import "reflect-metadata";
import "zone.js";
import {bootstrap, Component} from "angular2/angular2";
@Component({
selector: "my-app",
template: `
<h1>{{title}}</h1>
`
})
class MyApp {
public title = "Hello";
}
bootstrap(MyApp);
@armorik83の記事をやってみてからだとすごく簡単ですね。
importはおまじないと考えて、必要なAPIを取得していきます。初回起動時に必要なbootstrap、コンポーネント定義に必要なComponentを引っ張ってきて利用します。@Componentにて、Angular JSでのDirectiveに似たものを記述していきます。Decoratorというようです。Componentで利用するClass、HTML templateを記述していきます。そして、最終的なエントリーポイントであるbootstrapを記述します。
#ViewからModelへ
ViewからModelへということで、input要素で得た値をバインディングしてみましょう。
Angular JSでは、ng-modelというDirectiveを利用していたかと思いますが、Angular 2ではNgModelというDirectiveが存在します。
import "reflect-metadata";
import "zone.js";
import {bootstrap, Component, FORM_DIRECTIVES} from "angular2/angular2";
@Component({
selector: "my-app",
directives: [FORM_DIRECTIVES],
template: `
<h1>{{title}}</h1>
<input type='text' [(ng-model)]="title">
`
})
class MyApp {
title: string = "Hello World!";
}
bootstrap(MyApp);
TypeScriptには慣れていかないとダメですが、簡単ですね。[(...)]という記述が特徴的ですね。bindon-ng-modelという書き方もありますが、[(...)]の方が奨励されていますね。
[...]がインプットプロバティ、(...)がアウトプットプロバティを意味しています。インプットプロバティは、そこに入れる値、アウトプットプロバティは、値が変化したときに動作することを意味していると考えて良いでしょう。
試しに、(...)を抜いてみましょう。
import "reflect-metadata";
import "zone.js";
import {bootstrap, Component, FORM_DIRECTIVES} from "angular2/angular2";
@Component({
selector: "my-app",
directives: [FORM_DIRECTIVES],
template: `
<h1>{{title}}</h1>
<input type='text' [ng-model]="title">
`
})
class MyApp {
title: string = "Hello World!";
}
bootstrap(MyApp);
値がバインディングされなくなったかと思います。では、ng-model-changeを付け加えて変更時に値をバインディングさせましょう。
import "reflect-metadata";
import "zone.js";
import {bootstrap, Component, FORM_DIRECTIVES} from "angular2/angular2";
@Component({
selector: "my-app",
directives: [FORM_DIRECTIVES],
template: `
<h1>{{title}}</h1>
<input type='text' [ng-model]="title" (ng-model-change)="title=$event">
`
})
class MyApp {
title: string = "Hello World!";
}
bootstrap(MyApp);
このように、[(ng-model)]="title"は[ng-model]="title" (ng-model-change)="title=$event"に置き換え可能な訳ですね。ちなみにAngular 2に詳しい人によると、 Angular 2では双方向バインディングというより、単方向のバインディング設計 になっている模様。Inputs、Outputsという表現からもその思想がうかがえますね。でもまだAlpha版なので、Breaking Changeがあるかもしれないのでご注意くださいね。
#最後に
いかがでしたか？私も今回初めてAngular 2に触れてみましたが、Angular JSより記述しやすくなったなと感じています。みなさんもAngular 2を今から触れてみては！？
書いたコード貼っときます。
レビューしてくれたng-kyotoの皆さんThanks!!
明日は@rdlaboさんです。