1.5.3AngularJSは、Google社とコミュニティが開発するJavaScriptフレームワークです(図001)。Licenseのオープンソースで、商用にも使えます。AngularJSは、JavaScriptで書いたクライアント側のコントローラによりデータモデルを管理し、画面(ビュー)とリアルタイムにデータを交換するのに適したフレームワークです。本稿では、AngularJSのインストールおよび設定を行い、とりあえずごく簡単なアプリケーションとして動かしてみます。AngularJSのダウンロードと設定AngularJSはサイトのトップページにあるボタンでダウンロードします(前掲図001)。2は次世代のベータ版ですので、本稿では現行のバージョン1を用います。(stable)]を選びます(図002)。本稿執筆時は1.5.3が最新です。(legacy)]は互換性を考えて使う古いバージョンです。[Build]は省メモリサイズの[Minified]とし、今回は[CDN]のつぎのURLをコピーして用いることにします。[Build]で[Zip]を選んで[Download]ボタンを押せば、[Minified]と[Uncompressed]の両ビルドが拡張機能([Extras])も含めてローカルにダウンロードされます。https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js図002■AngularJSのダウンロードダイアログHTMLドキュメントのスタイルを設定するため、CSSフレームワークのBootstrapも加えることにします。started」)から、やはりCDNの記述をコピーします(図003)。オプションのbootstrap-theme.min.cssは使いません。図003■BootstrapサイトのダウンロードページBootstrapのCSSとJavaScriptファイル、およびAngularJSのJavaScriptファイルを、HTMLドキュメントの<head>要素につぎのように定めましょう。BootstrapはjQueryを必要とするので、jQueryのCDNライブラリも<script>要素に加えておきます。これで準備が整いました。input要素ひとつのフォームをつくるAngularJSでアプリケーションとして動かすHTMLドキュメントの<body>要素を書き加えます。以下のコード001のように、見出しふたつとフォームに入力用の<input>要素をひとつ加えましょう(図004)。それらの要素は、Bootstrapのcontainerクラスを定めた<div>要素で包みました。次項がAngularJSの設定です。AngularJSでデータバインディングするAngularJSでHTMLドキュメントを扱うには、ディレクティブ(directive)と呼ばれる指示・命令を、HTMLドキュメントのタグに属性のかたちで書き加えます。AngularJSでアプリケーションとして動かすページには、ディレクティブng-appを定めます。このディレクティブは、AngularJSのアプリケーションを自動的に起ち上げます。加える先は、アプリケーションとして動かす大もとの要素です。ページ全体をアプリケーションとするなら、つぎのように<html>タグに与えればよいでしょう。Referenceを参照するときは、「-」(ハイフン)を外してつぎの単語の頭を大文字にしたngAppディレクティブの項目で調べてください。ng-app>つぎに、データ(モデル)として扱いたい要素には、ngModelディレクティブを加えます。つぎのように<input>要素に、名前("yourName")を与えて定めましょう。}}と名前で参照できます。}}の位置に動的に表示されます(図005)。このように他のデータを参照する機能が「データバインディング」です。HTMLドキュメントの記述を以下のコード002にまとめました。サンプル001としてファイルをフレームに掲げます。1.5.3のリリースにともない、本文とコードを更新。