Menu
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?
318
ng-container serves as a container for elements which can also accept structural directives but is not rendered to the DOM, while ng-template allows you to create template content that is not rendered until you specifically (conditionally or directly) add it to the DOM.
ng-template falls under the category of structural directives, which help us define a template that doesn't render anything by itself, but conditionally renders them to the DOM. It helps us create dynamic templates that can be customized and configured.
ng-template is an Angular element that is used for rendering HTML in a template. However, it is not rendered directly on DOM. If you include an ng-template tag to a template, the tag and the content inside it will be replaced by comment upon render.
The ng-include directive includes HTML from an external file. The included content will be included as childnodes of the specified element. The value of the ng-include attribute can also be an expression, returning a filename. By default, the included file must be located on the same domain as the document.
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.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
