ng-include, ng-template or directive: which one is better for performance

Question

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.

--- index.html

<body ng-cloak>
  <div data-ng-include data-src="'partials/template/header.html'"></div>
  <div data-ng-include data-src="'partials/template/sidebar.html'"></div>

  <div ng-view></div>

  <div data-ng-include data-src="'partials/template/footer.html'"></div>      
</body>

-- header.html

<div id="header">
   // ... HTML CONTENT 
</div>

would it be better to have header.html in $templateCache ? Like for example:

-- header.html

<!-- CACHE FILE: header.html -->
<script type="text/ng-template" id="header.html">
    <div id="header">
       // ... HTML CONTENT 
    </div>                    
</scipt>

Or even should I use directives for each widget, like: <appHeader></appHeader> ... ?

Which one is better regarding performance, cohesion, reusability and scalability, in order to embed these widgets on each screen?

score 16 · Answer 1 · answered Mar 01 '14 at 03:57

Your choice currently need not be dictated by performance.

To start with if you put your partials on server or in ng-template and include them using ng-include the result is same and both are cached in the $templateCache. So even if loading partial from server may seem slower, this would be done once. I suggest if you have a decent size partial do not use ng-template and load it from server.

Based on the your page structure, atleast for headers and footers you do not need to use directives, there would be only single rendering for these controls. Standard ng-include with a partial and maybe a linked controller would do. Remember ng-include itself is a directive so no point comparing them on performance.

Directive would be useful where you want a component that needs to used across pages, your headers and footer nav do not fit this bill as there is a single instance of these elements on the page.

Hope it helps.

ng-include needs to get the template first time from the source, only after that it can use template cache for future use. — Chandermani, Nov 11 '14 at 04:08

score 8 · Answer 2 · answered Oct 24 '14 at 12:41

I prefer directives because ng-include only breaks down the view part into smaller modules. By using directives, even if it is used only once, you still nicely modularize your page into smaller independent components. Markup of the parent page looks much nicer and you don't have to clutter your controller with more methods. With some trickery, you can even handle events and remote calls specific to the directive via scope.$digest (instead of default $rootScope.digest) which will be better for performance. Additionally, your directive could do direct DOM manipulation if required.

score 7 · Accepted Answer · edited May 23 '17 at 12:02

I compared the performance of both in a view with large nested lists (up to 1000 entries, 4 levels deep).

Conclusion

Directives are between 50 - 100% faster than ng-include when it comes to rendering large data structures. If you have to render a lot of complex/nested data, especially recursive stuff - go with directives.

Also for functional elements (widgets, filter inputs, etc.) directives are more applicable because your logic is within your module and not floating around somewhere in your controller.

For more reference on recursion see here: Recursion in Angular directives

When you're just trying to divide your application into logical sections (header, sidebar, etc.) ng-include is probably better. One thing to keep in mind is that it's easier to access the controller's scope via ng-include. With directives this can get a bit tricky sometimes.

ng-include, ng-template or directive: which one is better for performance

3 Answers3

Conclusion

Linked