さて、先のサンプルで、テキストを書くとリアルタイムに表示が更新されたのは、「モデル」と「マークアップ」というものの働きによるものです。では、サンプルで使われている
AngularJSの機能について説明していきましょう。
■アプリケーションの指定
<html ng-app>
まず、
<html>タグに「
ng-app」というものがつけられていますね。これは、「このタグの内部が、AngularJSによって動的に関連付けられますよ」ということを示すものです。
appは、アプリケーションを示しているんでしょう。わかりやすくいえば、「このタグ内が、AngularJSのアプリケーションなんですよ」ということを示しているんですね。
ここでは
<html>タグに付けましたが、これはHTML全体をAngularJSの関連付けの対象にしているからです。
<body>につければその中だけが対象になります。あるいは、もっと後になって説明しますが、
ng-appは名前をつけて複数設定したりできるので、
<body>内のいくつかのタグに異なる名前の
ng-appをつけたりすることもあります。
まぁ、今のところは「
<html>や
<body>に
ng-appとつけておけばAngularJSが使えるようになる」とだけ覚えておけばいいでしょう。
■モデルの設定
<input type="text" ng-model="msg">
ページ本体で出てくる１つ目のポイントは、この部分。「
ng-model」というものが書いてありますね。これは、「
ディレクティブ」と呼ばれるものです。ディレクティブは、AngularJSによって新たに追加されたタグの属性のようなもの、と考えればよいでしょう。
この
ng-modelというディレクティブは、「
モデル」というものを設定するためのものです。モデルは、Webページに表示されるデータを示すためのものです。例えば、ここで書かれている
ng-model="msg"は、この
<input type="text">の値が「
msg」というモデルと関連付けられた、ということを示します。
■マークアップの利用
このモデルの値は、いろいろなところで使えます。ここでは、その次の行にこんな形で利用しています。
<p>you typed: {{msg}}.</p>この
{{○○}}という書き方は、AngularJSによって新たに用意された「
マークアップ」です。このマークアップは、式や値をHTML中に埋め込むのに利用します。ここでは
{{msg}}としていますが、これにより、
msgの値がここに表示されるようになります。
この「
モデル」と「
マークアップ」により、
モデルに設定されたフィールドの値を書き換えると、
マークアップの表示が瞬時に変わる、といった動作が作成できたのですね。この２つの要素は、AngularJSを使う際のもっとも基礎的なものですので、ここでしっかりと覚えておきましょう。