はじめに

AngularJS の template をどう管理していますか？

AngularJS の template とぼくが呼ぶのは AngularJS の Directive の template あるいは templateUrl で指定するものです。

この AngularJS の template の管理についてはドキュメントやサンプルコードあるいはブログ記事ではあまり大きく取り上げられたところを見ないのですが、実用上は重要な問題だとぼくは考えています。

そこで今回はいくつかの方法とともにぼくの採用している gulp-angular-templatecache を使った方法を紹介しようと思います。

(サンプルコードはすべて CoffeeScript で記載します)

AngularJS template を指定する 3 つの方法

Directive の template と templateUrl についておさらいします。 3 つの方法があります。

template : template 文字列を指定します。
templateUrl (1) : template 文字列を指す URL 文字列を指定します。
templateUrl (2) : template 文字列を指す URL 文字列を返す関数を指定します。

1 つめの方法は template 文字列を直接指定することを想定しています。例えば '<p>{{value}}</p>' のように直接 template 文字列を指定します。

2 つめの方法は template 文字列を別ファイルに分離することを想定しています。例えば 'index.html' のように templateUrl 文字列を指定します。この方法に関しては次節でもうすこし掘り下げようと思います。

3 つめの方法はぼくは使ったことがないのですが、例えば (el, attrs) -> 'index.html' のように指定します。

このあたりの情報は https://docs.angularjs.org/guide/directive を参照すると良いと思います。(個人的にはこのドキュメントもリファレンスも使いづらくて大嫌いです。)

templateUrl に指定する値を準備するための 2 つの方法

templateUrl は template 文字列を別ファイルに分離することを想定した推奨される方法です。具体的にどう分離するのかを見てみましょう。

まず HTML に書いてしまう方法です。

<script type="text/ng-template" id="index.html">
  <p>{{value}}</p>
</script>

AngularJS は <script type="text/ng-template"> を見つけるとその内容を $templateCache に取り込みます。id 属性で指定した値を templateUrl に指定できます。

詳細は https://docs.angularjs.org/api/ng/directive/script を参照すると良いと思います。

次に $templateCache を直接使う方法です。

例で示します。これは上記とほとんど同じ動きをします。

angular.module 'myApp', []
.run [
  '$templateCache'
  ($templateCache) ->
    $temlateCache.put 'index.html', '<p>{{value}}</p>'
]

この方法では template に直接指定していたときと何も変わりません。そこでいくつかの対策があります。これは後述します。

ちなみに $templateCache の詳細は https://docs.angularjs.org/api/ng/service/$templateCache を参照すると良いと思います。

本題

ここまでが前提知識です。

ここからが冒頭の「AngularJS の template をどう管理していますか？」のぼくの答えです。

まず JavaScript 内に HTML を埋め込むことは考えられません。なぜなら多くのテキストエディタではそれは JavaScript の文字列として扱われてしまうため、ハイライトや補完などの入力支援を受けることができないからです。

つまり *.html として作成したものを変換して取り込みたいというわけです。

いろいろ方法はありますがいくつかの案を挙げます。

template に JavaScript 文字列に変換した *.html を指定する
$templateCache に JavaScript 文字列に変換した *.html を指定する

どちらでも大差ないと思います。ぼくは後者を利用しています。後述のツールの支援を受けているからです。

それが gulp-angular-templatecache という gulp plugin です。詳細はリンクを参照ください。

簡単に使い方を README から引用しておきます。

gulpfile sample:

templateCache = require 'gulp-angular-templatecache' 

gulp.task 'default', ->
  gulp.src 'templates/**/*.html'
    .pipe templateCache()
    .pipe gulp.dest('public')

output sample:

angular.module("templates").run([$templateCache,
  function($templateCache) {
    $templateCache.put("template1.html",
      // template1.html content (escaped) 
    );
    $templateCache.put("template2.html",
      // template2.html content (escaped) 
    );
    // etc. 
  }
]);

さきほど期待していた出力が得られたと思います。これを使ってぼくの環境ではうまく管理できています。

最後に

この文書を作成した動機としてb-html/b-html で HTML より効率的に書く方法の紹介があるのですが、長くなりそうなのでそれは別の機会にします。

以上。