{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 \"骚年 ilove 的问题《ng-include, ng-template or directive: which one is》','https://www.manongdao.com/q-1334194.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
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-includewhen 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-includeis probably better. One thing to keep in mind is that it's easier to access the controller's scope viang-include. With directives this can get a bit tricky sometimes.Your choice currently need not be dictated by performance.
To start with if you put your partials on server or in
ng-templateand include them usingng-includethe 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 useng-templateand 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-includewith a partial and maybe a linked controller would do. Rememberng-includeitself 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.