1.6.4Angularは、Google社とコミュニティが開発するJavaScriptフレームワークです(図001)。Licenseのオープンソースで、商用にも使えます。Angularは、JavaScriptで書いたクライアント側のコントローラによりデータモデルを管理し、画面(ビュー)とリアルタイムにデータを交換するのに適したフレームワークです。1.6からバージョン2に更新されたとき、名前から「JS」が除かれました。設計は大きく改められ、AngularJS(1.x)のコードはかなり手を加えなければ動かすのがむずかしくなりました。バージョン2からは、TypeScriptを使うことが推奨されています。本校執筆時の最新バージョンは4です(3はありません)。1.6を学ぼうと考える人もまだ少なくないでしょう[*1]。1.6のインストールおよび設定を行い、とりあえずごく簡単なアプリケーションとして動かしてみます。2以降よりかなり多いそうです。「いまだに1系を使い始める人がまだまだ多いみたいなんです。Angularチームはドキュメントの参照数をカウントしているのですが、AngularよりもAngularJSのほうがかなり参照数が多い。130万と80万という比率だそうです。AngularJSのダウンロードと設定AngularJS(1.x)のサイトは、最新版のAngularとは別に設けられています。トップページにあるボタンでダウンロードします(前掲図001)。(stable)]を選びます(図002)。(legacy)]は互換性を考えて使う古いバージョンです。[Build]は省メモリサイズの[Minified]とし、今回は[CDN]のつぎのURLをコピーして用いることにします。[Build]で[Zip]を選んで[Download]ボタンを押せば、[Minified]と[Uncompressed]の両ビルドが拡張機能([Extras])も含めてローカルにダウンロードされます。src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>図002■AngularJSのダウンロードダイアログHTMLドキュメントのスタイルを設定するため、CSSフレームワークのBootstrapも加えることにします。started」)から、やはりCDNの記述をコピーします(図003)。図003■BootstrapサイトのダウンロードページBootstrapのCSSとAngularJSのJavaScriptファイルが、HTMLドキュメントの<head>要素につぎのように定められました。input要素と見出しを加えるAngularJSでアプリケーションとして動かすHTMLドキュメントの<body>要素を書き加えます。以下のコード001のように、入力用の<input>要素にラベル(<label>要素)を添えて見出し(<h1>要素)を加えました(図004)。それらの要素は、Bootstrapのcontainerクラスを定めた<div>要素で包んでいます。次項で、AngularJSの処理を加えましょう。AngularJSでデータバインディングするAngularJSでHTMLドキュメントを扱うには、ディレクティブ(directive)と呼ばれる指示・命令を、HTMLドキュメントのタグに属性のかたちで書き加えます。AngularJSでアプリケーションとして動かすページには、ディレクティブng-appを定めます。このディレクティブは、AngularJSのアプリケーションを自動的に起ち上げます。加える先は、アプリケーションとして動かす大もとの要素です。ページ全体をアプリケーションとするなら、つぎのように<html>タグに与えればよいでしょう。Referenceを参照するときは、「-」(ハイフン)を外してつぎの単語の頭を大文字にしたngAppディレクティブの項目で調べてください。ng-app>つぎに、データ(モデル)として扱いたい要素には、ngModelディレクティブを加えます。つぎのように<input>要素に、名前(yourName)を与えて定めましょう。その要素に設定された値は、二重波括弧{{}}と名前で参照できます。すると、<input>要素に入力されたテキストが、二重波括弧{{}}の位置に動的に表示されます(図005)。このように他のデータを参照する機能が「データバインディング」です。HTMLドキュメントの記述を以下のコード002にまとめました。サンプル001としてファイルをフレームに掲げます。