AngularJSでのng-includeのパス指定の方法

AngularJSのng-includeのパス指定の方法はクセがある。

例えば「template.html」を指定するにはこうする。

<ng-include src="'template.html'"></ng-include>

ポイントは、srcの「ダブルクオーテーションの中にさらにシングルクォーテーションを書いてその内側にパスを書く」ということ！

クセあるでしょう？(^^);

パス指定の方法でもうひとつ注意したいのが、相対パス。

ng-includeはincludeされた側のHTML内でもng-includeをネストして使うことができるが、その場合のパス指定はどうなるか？

例えばファイルシステム上で

index.html
templates/template.html
templates/subtemplates/subtemplate.html

という位置関係になっているとする。

まずindex.htmlでtemplate.htmlを読み込むには「templates/template.html」と指定する。これは普通に納得がいくだろう。

次に、template.htmlでsubtemplate.htmlを読み込むにはどうするか？「subtemplates/subtemplate.html」ではない。「templates/subtemplates/subtemplate.html」だ。

つまり、「指定すべき相対パスは、あくまでコントローラーとなるファイルからのパスとなり、ファイルシステム上での位置関係とは無関係」ということなので注意したい。