Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

ディレクティブで利用するテンプレートを外部ファイル化するには?(templateUrlプロパティ)

2016年9月15日

ビューの操作/生成を定義した自作ディレクティブのテンプレートを外部ファイル化して利用する方法を解説。また、ビューの中で<script>要素としてテンプレートを宣言する方法も説明する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:ディレクティブを自作するには?」では、ごく基本的なディレクティブとして、あらかじめ用意された文字列を表示するだけのwg-helloディレクティブを例に、ディレクティブの定義方法を紹介しました。その例では、templateプロパティを利用して、テンプレート文字列もディレクティブ定義の中に埋め込んでいました。

 しかし、一般的なアプリでは、ディレクティブのロジック部分と、ビュー(テンプレート)とが混在しているのは望ましい状態ではありません。サンプルのような用途を除いては、テンプレートは別ファイルとして外部化するのが原則です。そして、テンプレートを外部化するには、ディレクティブオブジェクトでtemplateUrlプロパティを指定します。

 以下は、別稿のサンプルをtemplateUrlプロパティで書き換えた例です。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<wg-hello></wg-hello>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script>
angular.module('myApp', [])
  .directive('wgHello', function() {
    return {
      restrict: 'E',
      templateUrl: 'wg_hello.html'
    }
  })

  .controller('MyController', ['$scope', function($scope) {
  }]);
</script>
</body>
</html>
テンプレートを外部ファイル化するためのコード(template_url.html)
HTML
<p style="background-color:Yellow">こんにちは、世界!</p>
外部化されたテンプレート(wg_hello.html)

<script>要素でテンプレートを定義する

 テンプレートはビューの中で<script>要素として宣言しておくこともできます。この場合、templateUrlプロパティには<script>要素のid属性で指定した値を指定します。

HTML
<script>
angular.module('myApp', [])
  .directive('wgHello', function() {
    return {
      restrict: 'E',
      templateUrl: 'wg_hello2.html'
    }
  })
  ……中略……
</script>
<script type="text/ng-template" id="wg_hello2.html">
  <p style="background-color:Yellow">こんにちは世界</p>
</script>
テンプレートを<script>要素で宣言したコード(template_url2.html)
処理対象:ディレクティブ カテゴリ:基本
処理対象:自作 カテゴリ:ディレクティブ
API:angular.Module カテゴリ:ng(コアモジュール) > type(型)

※以下では、本稿の前後を合わせて5回分(第71回~第75回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
71. AngularJSのコントローラーを単体テストするには?

テスティングフレームワーク「Karma+Jasmin」を使って、AngularJSの「コントローラー」の単体テストを記述し、それを実行する方法を解説する。

AngularJS TIPS
72. ディレクティブを自作するには?(directiveメソッド)

AngularJSで、ビューの操作/生成を独立させて独自ディレクティブを作成する基本的な定義方法と使用例を説明する。

AngularJS TIPS
73. 【現在、表示中】≫ ディレクティブで利用するテンプレートを外部ファイル化するには?(templateUrlプロパティ)

ビューの操作/生成を定義した自作ディレクティブのテンプレートを外部ファイル化して利用する方法を解説。また、ビューの中で<script>要素としてテンプレートを宣言する方法も説明する。

AngularJS TIPS
74. ディレクティブ配下のコンテンツをテンプレートに反映させるには?(transcludeプロパティ)

自作ディレクティブ呼び出し側で指定した「配下のコンテンツ」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。

AngularJS TIPS
75. ディレクティブで属性を設定するには?(scopeプロパティ)

自作ディレクティブ呼び出し側で指定した「属性の値(文字列)」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!