サンプルコードを書き換えてデータバインディングを試す
データバインディングは変数の値と画面表示を結びつけるAngularJSの特徴的な機能です。Angular 2でデータバインディングを試すため、サンプルコードを少し書き換えてみます。app.component.tsをリスト7のように変更します。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>{{helloMessage}}</h1>' // バインド記述 ...（1）
})
export class AppComponent {
// バインドされる変数 ...（2）
helloMessage = 'Message from AppComponent';
}
バインドされる変数helloMessageを（2）のように記述して、テンプレートでは（1）のように「{{ }}」で変数名を囲んで参照します。この記法はAngularJS 1と同じなので、経験者にはなじみやすいでしょう。
リスト7を実行すると図7のように表示され、データバインディングが行われていることがわかります。
Angular 2のモジュール機能を先取りで体験
ここまでは1個のコンポーネントを扱ってきましたが、Angular 2では1ページに複数のコンポーネントを含めることができます。リスト8のように2個目のコンポーネントapp.component2.tsを作ってみます。
import { Component } from '@angular/core';
@Component({
selector: 'my-app-2', // タグ定義 ...（1）
styles: ['.header {color:blue;}'], // スタイル定義 ...（2）
template: '<h1 class="header">{{helloMessage}}</h1>'
})
export class AppComponent2 {
helloMessage = 'Message from AppComponent 2';
}
（1）で2個目のコンポーネントを埋め込むタグ（<my-app-2>タグ）を指定します。また（2）のstylesに、コンポーネント内で利用するスタイル定義（CSS）を記述します。ここではtemplate内のh1タグに指定するheaderクラスで、青のテキスト色を指定しています。
1個目のコンポーネントもリスト9のように修正します。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
styles: ['.header {color:red;font-style:italic}'], // スタイル定義 ...（1）
template: '<h1 class="header">{{helloMessage}}</h1>'
})
export class AppComponent {
helloMessage = 'Message from AppComponent';
}
（1）のスタイル定義で、headerクラスに赤のテキスト色とイタリックの表示を指定しています。リスト8とリスト9で同じheaderクラスに異なる指定をしていることに注目してください。
コンポーネントが2個になったので、main.tsの起動処理はリスト10のように、それぞれのコンポーネントを参照して起動するように修正します。
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { AppComponent2 } from './app.component2';
bootstrap(AppComponent);
bootstrap(AppComponent2);
またindex.htmlには2個目のコンポーネントが設定される<my-app-2>タグを追記します。
<body> <my-app>Loading...</my-app> <my-app-2>Loading...</my-app-2> </body>
リスト8～リスト11を実行すると図8のように、それぞれのコンポーネントが指定されたスタイルで表示されます。1個目のコンポーネントに指定された斜体表示が2個目のコンポーネントに反映されていないことから、単なるスタイルの上書きではなく、別個のスタイルが適用されていることがわかります。
一般にCSSのスタイル指定はWebページ全体で共有されるため、ページの一部をモジュールとして入れ替える場合はスタイルの競合へ配慮が必要です。しかしAngular 2ではコンポーネント間の独立性が保たれており、スタイル指定が競合する心配がありません。このようにWebページのモジュール化が可能な点は、Angular 2の大きな特徴と言えます。
まとめ
本記事では、AngularJSの次期バージョン「Angular 2」について、主な特徴を紹介するとともに、Angular 2のコードを書き始めるためのサンプルプロジェクトを作成し、データバインディングやモジュール化の機能を動作確認しました。
Angular 2はJavaScript最新仕様への追従やモジュール化の考え方など、より先進的な機能を取り入れた進化を果たしている一方で、AngularJS 1からの変更点も多く、経験者であっても学ぶべきことは少なくありません。本連載ではAngular 2の機能を順次紹介していきます。次回はAngular 2のディレクティブ（独自タグ）と、今回紹介したデータバインディングの詳細について解説します。
