AngularJS ng-include使用時のhtmlのpreload方法

最近、転職活動に勤しみだしたnaosk8です。

今日は、Angular触っていて、いろいろぐぐって辿り着いた

ng-include使用時のhtmlのpreload方法。

前提 

- AngularJSのバージョン : 1.4.1

- やりたいこと :

　ng-include, ng-routeの対象となる全htmlを1ファイルにまとめ

　htmlファイルとしてはそれだけを取り扱うことで通信コストを下げたい。

　# アプリサイズも小さいので1ファイルにまとめてますが、

　　サイズが大きい場合は分割単位は各々検討してください。

つまりはこうすれば良いらしい

AngularJS: load all templates in one file · GitHub

つまづき

一連のgit上でのやりとりでも書かれていますが、

以下のようにheadersも返してあげないと、ちゃんと動きません。

また、Promiseの内部の結果をreturnするだけでなく、

Promise自体をreturnしないとだめ。

運用上のノウハウ

リンク先のソース上、getする対象のhtmlに対して、

クエリパラメータで、バージョンを指定しておけば

そのバージョン更新を行うことで、一気に参照するhtml全てを更新可能。

逆に、それをしないと、部分的に古いキャッシュを拾い続けたりするので注意。

ではまたまた。