libro
www.tuyano.com
初心者のためのAngularJS入門

AngularJSの基礎を理解しよう (3/5)

作成:2015-12-05 09:04
更新:2015-12-05 09:04

■モデルとマークアップ

さて、先のサンプルで、テキストを書くとリアルタイムに表示が更新されたのは、「モデル」と「マークアップ」というものの働きによるものです。では、サンプルで使われている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">

ページ本体で出てくる1つ目のポイントは、この部分。「ng-model」というものが書いてありますね。これは、「ディレクティブ」と呼ばれるものです。ディレクティブは、AngularJSによって新たに追加されたタグの属性のようなもの、と考えればよいでしょう。

このng-modelというディレクティブは、「モデル」というものを設定するためのものです。モデルは、Webページに表示されるデータを示すためのものです。例えば、ここで書かれているng-model="msg"は、この<input type="text">の値が「msg」というモデルと関連付けられた、ということを示します。

■マークアップの利用

このモデルの値は、いろいろなところで使えます。ここでは、その次の行にこんな形で利用しています。
<p>you typed: {{msg}}.</p>

この{{○○}}という書き方は、AngularJSによって新たに用意された「マークアップ」です。このマークアップは、式や値をHTML中に埋め込むのに利用します。ここでは{{msg}}としていますが、これにより、msgの値がここに表示されるようになります。

この「モデル」と「マークアップ」により、モデルに設定されたフィールドの値を書き換えると、マークアップの表示が瞬時に変わる、といった動作が作成できたのですね。この2つの要素は、AngularJSを使う際のもっとも基礎的なものですので、ここでしっかりと覚えておきましょう。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!doctype html>
<html ng-app>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div>
    <p>input:<input type="text" ng-model="msg"></p>
    <p>you typed: {{msg}}.</p>
    </div>
</body>
</html>
※関連コンテンツ

「初心者のためのAngularJS入門」に戻る