読者です 読者をやめる 読者になる 読者になる

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も返してあげないと、ちゃんと動きません。

f:id:naosk8:20160414092043p:plain

 

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

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

f:id:naosk8:20160414092201p:plain

 

運用上のノウハウ

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

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

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

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

 

 

ではまたまた。