title: $templateCache, $templateRequest, ngInclude play nice(er) together
body: <p>I'm trying to get all my partials at first page view, so that during application viewing no html is downloaded.</p>
  
  <h2>One way is by having templates in <code>index.html</code>.</h2>
  
  <pre><code>&lt;script type="text/ng-template" id="templateId.html"&gt;
    &lt;p&gt;This is the content of the template&lt;/p&gt;
  &lt;/script&gt;
  </code></pre>
  
  <ul>
  <li>This way is you have more than 5 templates <code>index.html</code> file becomes
  unmanageable and breaks module structure of project.</li>
  </ul>
  
  <h2>Another way of doing this is to have html in <code>.js</code> file, most likely in <code>app.js</code></h2>
  
  <pre><code>myApp.run(function($templateCache) {
    $templateCache.put('templateId.html', 'This is the content of the template');
  });
  </code></pre>
  
  <ul>
  <li>I think <code>.js</code> file is no place for html code and again same problems
  as with having it in <code>index.html</code>.</li>
  </ul>
  
  <hr>
  
  <p>What I would like to do, is have templates in different files, so I can keep my modules structure and preload them on index.</p>
  
  <p>This is what I have now.</p>
  
  <pre><code>var cmsAppFirstRun = function ($templateCache, $templateRequest, $rootScope) {
      $templateRequest('views/common/top-bar.html').then(function (response) {
          $templateCache.put('top.bar', response);
          $rootScope.templatesDone = true;
      });
  };
  
  angular.module('cmsApp').run(cmsAppFirstRun);
  </code></pre>
  
  <p>And html</p>
  
  <pre><code>&lt;div ng-include="'top.bar'" ng-if="$root.templatesDone"&gt;&lt;/div&gt;
  </code></pre>
  
  <h2>Is there a more sexy, angularish way of doing this?</h2>