title: ng-include, ng-template or directive: which one is better for performance
body: <p>I would like to know the best way to design an angular app regarding performance, for building an HTML template with reusable widgets like header, sidebar, footer, etc. Basically the main content is the central DIV which will have its content varying between routes, header and footer will be almost always the same, sidebar can vary in certain pages. </p>
  
  <p>--- index.html</p>
  
  <pre><code>&lt;body ng-cloak&gt;
    &lt;div data-ng-include data-src="'partials/template/header.html'"&gt;&lt;/div&gt;
    &lt;div data-ng-include data-src="'partials/template/sidebar.html'"&gt;&lt;/div&gt;
  
    &lt;div ng-view&gt;&lt;/div&gt;
  
    &lt;div data-ng-include data-src="'partials/template/footer.html'"&gt;&lt;/div&gt;      
  &lt;/body&gt;
  </code></pre>
  
  <p>-- header.html</p>
  
  <pre><code>&lt;div id="header"&gt;
     // ... HTML CONTENT 
  &lt;/div&gt;                
  </code></pre>
  
  <p>would it be better to have header.html in $templateCache ? Like for example:</p>
  
  <p>-- header.html</p>
  
  <pre><code>&lt;!-- CACHE FILE: header.html --&gt;
  &lt;script type="text/ng-template" id="header.html"&gt;
      &lt;div id="header"&gt;
         // ... HTML CONTENT 
      &lt;/div&gt;                    
  &lt;/scipt&gt;
  </code></pre>
  
  <p>Or even should I use directives for each widget, like: <code>&lt;appHeader&gt;&lt;/appHeader&gt;</code> ... ?</p>
  
  <p>Which one is better regarding performance, cohesion, reusability and scalability, in order to embed these widgets on each screen?</p>