2入門」シリーズはAngular公式サイトの「TUTORIAL」をもとに、説明の仕方や進め方を手直ししたものです。コードの動きは段階を細かめに分けて確かめるようにし、TypeScriptの構文についても補いました。基本的な機能であるデータバインディングについてご説明します。2でコードを書いて動かす」を先に読まれるとよいでしょう。2でコードを書いて動かす」でつくったファイル(コード001およびコード002)に手を加えるかたちで進めます(中身はAngular公式サイトの「QUICKSTART」と同じです)。ファイルの構成は、つぎの図001のとおりです。プロジェクトのフォルダの名前は、どのように変えても構いません。HTMLドキュメントを書き替えるまず、HTMLドキュメント(index.html)は以下のコード001のように書き替えます。もとのファイルと組み立てはほぼ同じです。変わったのは第1に、JavaScriptライブラリ4つをCDN(unpkg)から読み込んでいます。サーバーで試すときも、ライブラリのアップロードは要りません。比較的大きいのが第2として、systemjs.config.jsをCDNのsystemjs.config.web.jsに替えたことです。もとの作例より、使うパッケージが増えました。初期設定のコードも含み、アプリケーションのモジュール(app.module)を直に起ち上げています。そのため第3に、systemjs.config.jsだけでなく、アプリケーションを起動するmain.tsも要らなくなりました。src="https://cdn.rawgit.com/angular/angular.io/74ef87f/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script></head><body><my-app>Loading...</my-app></body></html>なお、CSSファイル(styles.css)については、もとのファイルをそのまま用います。コンポーネントのクラスに定めたプロパティの値を要素に差し込むつぎに、コンポーネントのクラス(AppComponent)に、つぎのようにプロパティ(titleとheroine)を加えます。この値は、クラスのデコレータに定めたComponent関数に引数のオブジェクトを渡すとき、テンプレート(template)の値の中で参照できます。その場合、二重波括弧{{}}でプロパティをくくって加えます。ビルドしてアプリケーションを試すと、以下の図002のようにコンポーネントのクラスのプロパティ値が、差し込まれた要素のテキストとして示されます。デコレータ(Decorator)を使う」参照)。exportはファイルに分けたモジュールを、別のモジュールから使えるようにする仕組みです。exportとimport」参照)。プロパティに与えるのをオブジェクトにすれば、複数の値が含められます。そこで、つぎのように新たなクラス(Heroine)を定め、そこにプロパティ(idとname)を加えました。コンポーネントのクラス(AppComponent)のプロパティ(heroine)は、その型づけにしてオブジェクトを与えています。そのオブジェクトは新しいクラスのインスタンスではありません。アプリケーションから表示されるページは、とくに変わりありません(前掲図002)。コンポーネントのテンプレートに値の入ったラベルとテキスト入力フィールドを加えるさらに、コンポーネントのテンプレートに要素を加えます。デコレータ関数(Component)の引数オブジェクトに定めるtemplateに、つぎのようにタグを書き足せばよいでしょう。改行もインデントもないので、要素が増えるとかなり見にくくなります。literal(テンプレートリテラル)が使えます。クォーテーションの替わりにバックティック(`)でくくれば、空白文字が無視されるので、つぎのようにHTMLのタグと同じく書式を整えることができます。'<h1>{{title}}</h1><h2>{{heroine.name}}の情報</h2>'})二重波括弧{{}}の参照は、前掲コードのように要素のテキストだけでなく、属性値に用いることもできます。アプリケーションをビルドして試すと、コンポーネントから差し込まれる要素にラベルやテキスト入力フィールドが加わり、コンポーネントのクラス(AppComponent)のプロパティから得られた値が示されます(図003)。クラスのデータを要素に反映することは「バインディング」といいます。図003■コンポーネントから差し込まれる要素にラベルとテキスト入力フィールドが加わった加えたテキスト入力フィールドのテキストは、キーボードから書き替えられます。今のところはページに示される情報に反映はされません。データはテンプレートの要素の側から参照する一方向に定められているからです。2のモジュールからFormsModuleクラスをimportします。アプリケーションのクラス(AppModule)のデコレータ(@NgModule)宣言に渡す引数のオブジェクトに、プロパティimportsの配列要素として加えます。{}FormsModuleクラスのNgModelディレクティブを使うと、双方向のバインディングができます。コンポーネント(AppComponent)のテンプレート(template)は、値をつぎのように書き替えます。要素(input)の属性(value)は[()]でくくったディレクティブで替え、プロパティの参照を文字列で定めます。プロパティは{{}}でくくらないことにご注意ください。{}アプリケーションをビルドして確かめると、テキストフィールドに入力したテキストでコンポーネントのクラスのプロパティ値が書き替わり、その値を参照する他の要素の表示に反映されます(図004)。ここまで書き上げたアプリケーションとコンポーネントのモジュールは、以下のコード002にまとめました。併せて、Plunkerに作例のコードを掲げています。