All we need is an easy explanation of the problem, so here it is.
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.
<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>
<div id="header"> // ... HTML CONTENT </div>
would it be better to have header.html in $templateCache ? Like for example:
<!-- 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?
How to solve :
I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.
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.
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.
I compared the performance of both in a view with large nested lists (up to 1000 entries, 4 levels deep).
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.
Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂