インターポレーション(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などの「デベロッパーツール」ではなく、「ページソースを表示」で確認できます。