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