おっさんエンジニアの備忘録

ここは主におっさんエンジニアが技術的な事を調べたり、試してみたりしたことを備忘録的に書いていくものです。忘れっぽいからね。誰かの参考になったら嬉しい。

ng-includeなどについてリクエストがどのくらい発生するのか？

AngularJS

ふと疑問に思ったこと

directiveやng-includeなどで、外部ファイルを読み込むようなことがあると思います。
$templateCacheでは、スクリプトタグで書くか、ロジックで設定するようにすると良いよ、と書かれています。

https://docs.angularjs.org/api/ng/service/$templateCache

でも実際、パーツとしてのHTMLを開発するにしても、追加するたびに1つのファイルに編集が集中してしまうのはなんかイヤな気がします。パーツとなるHTMLは開発中のモジュールと合わせて独立して追加ができたほうが効率は良さそうだなぁと感じるわけです。また、スクリプトタグでHTMLを書くと、IDEとかのハイライトが効かないんじゃないかとか思ってしまいます。
ちなみに別ファイルとして作成したパーツを自動でキャッシュに乗せてくれるgrunt-angular-templatesというものがあります。

https://github.com/ericclemmons/grunt-angular-templates

これを使っても良いのですが、livereloadに対応してくれるの？とかminifyさせるにはどこにタスクを差し込むの？とかいろいろ考えることが多そうです。

で、そもそもパーツのHTMLを直接叩いたら何が起こるか？を一応確認しておこうと思いました。
ネットの記事などでは、「アクセスするときにリクエストが発生してヤな感じ」みたいなことが書かれていましたが、実際はどう動いているんでしょうか？
とりあえず、ng-includeを使った簡単なサンプルを作ってみました。chromeの開発者ツールなのでリクエストの発生を見てみたいと思います。

テストのソースコード（同一階層に適当なa.htmlとb.htmlを置いてください）

<!DOCTYPE html>
<html lang="ja" ng-app>
  <head>
    <meta charset="utf-8">
    <title>テスト</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  </head>
  <body>
    <h3>ng-includeのテスト</h3>
    <div>
      <label>
        表示する
        <input type="checkbox" ng-model="visible" ng-init="visible=true"></input>
      </label>
    </div>
    <div>
      <label>
        a.html<input type="radio" ng-model="incTemplate" ng-value="'a.html'"></input>
      </label>
      <label>
        b.html<input type="radio" ng-model="incTemplate" ng-value="'b.html'"></input>
      </label>
    </div>
    <hr />
    <div ng-show="visible" ng-init="visible = true">
      Show Area!
      <div ng-include="incTemplate" ng-init="incTemplate = 'a.html'"></div>
    </div>
  </body>
</html>

確かにb.htmlに切り替えたタイミングで通信は発生しているようですが、以降は通信は発生していませんでした。最初の通信時にキャッシュに乗ったので、通信はこれ以上発生しないみたいですね。

動作としては、遅延初期化のようなイメージでしょうか。すべてのテンプレートを読み込む前提であれば、1ファイルにまとまったテンプレートを一括で読み込んだほうがトータルの処理時間は短くなるかもしれませんが、最初のローディング処理が長くなってしまう気がしますね。個人的にはこの方法も大幅に間違っていない気もします。ケースによって使い分けても良いかもしれませんね。