AngularJSのインターポレーションについて

JavaScript

インターポレーション(interpolation)とは、書き入れ、書き入れられた語句、補間法などの意味があります。
プログラムにおけるインターポレーションとは文字列補完を行うことで、もっと簡単に言うと変数展開になります。つまりプログラム入門編でよくやる次の内容です。
JavaScriptで変数展開の例

var myName = 'Tahara';
console.log('Hello ' + myName);

AngularJSではControllerで作成した内容をView側つまりHTMLで表示させる仕組みとして$scopeを用意しています。$scopeはControllerとViewをバインドする役割を持っています。
$scopeがControllerとViewをバインドしたら、View側にControllerで指定した値を表示するために、AngularJSではインターポレートをブレースを2重にした {{ }} で実現します。

ControllerとViewの橋渡しをするものが$scopeオブジェクトで、そして具体的にViewで表示する仕組み、つまりインターポレートする仕組みとして {{ }} を使う訳です。

簡単なサンプルコードは以下の通りです。
デモ
AngularJSコード

var myApp = angular.module('myApp', []);
myApp.controller('mainController',['$scope',function($scope) {
    $scope.name = 'Tarou';
}]);

HTML側コード

<div ng-controller="mainController">
    <h1>{{name}}さん、こんにちわ!</h1>
</div>

$scopeがAngularJSコードとHTMLを橋渡しして、HTML側の{{name}}がAngularJSで初期化した値’Tarou’をインターポレートしています。

$scopeはHTML側の{{}}とControllerの中身を橋渡しするのですから、以下のように{{$scope.name}}とはしませんので注意してください。

間違いの例

<h1>{{$scope.name}}こんにちわ!</h1>

尚、ブラウザがHTMLをダウンロードしてDOM構築の段階では、「{{name}}さん、こんにちわ!」部分はそのままDOM構築されています。その後レンダリング時点でインターポレートされていることを知っておきましょう。 Chromeなどの「デベロッパーツール」ではなく、「ページソースを表示」で確認できます。

タイトルとURLをコピーしました