title: Strategy for combining Angular templates to reduce requests?
body: <p><strong>Background:</strong> We're in the process of porting an ASP.NET application from traditional WebForms to Web API + Angular. The app is primarily used in countries with poor internet connections, and we've found in practice that latency is a bigger issue than bandwidth. So our priority is to reduce the overall number of requests to the server, even if that means pre-loading scripts or other resources that the user might not ending up needing.</p>
  
  <p><strong>The problem:</strong> As we replace WebForms user controls (*.ascx) with Angular directives and templates, the number of little HTML template files is proliferating; so you have to make a lot of server requests for any given view, which is a big problem in a high-latency environment. </p>
  
  <p><strong>One possible approach:</strong> I'm thinking of using <a href="http://msdn.microsoft.com/en-us/library/bb126445.aspx" rel="nofollow">T4</a> to combine all templates used by the app into a single file that would look something like this:</p>
  
  <pre><code>myApp.templates = {};
  
  myApp.templates.myFirstDirective = "&lt;div&gt; ... lots of markup here ... &lt;/div&gt;"
  myApp.templates.mySecondDirective = "&lt;table&gt; ... more markup ... &lt;/table&gt;"
  </code></pre>
  
  <p>This file would then be requested once and cached by the browser, so subsequent page loads wouldn't require any further round trips to the server. The templates would then be available to all directives so that instead of referencing a <code>templateUrl</code> they just pull up the required template like this</p>
  
  <pre><code>return {
      link: link,
      template: myApp.templates.myFirstDirective,
      ... etc
  }
  </code></pre>
  
  <p><strong>Question:</strong> Is this a good idea? Is there a better or more Angular-native way of combining Angular templates into a single file? </p>