NG-包括NG-模板或指令：其中之一是获得更好的性能 [英] ng-include, ng-template or directive: which one is better for performance
问题描述
我想知道设计对于性能的角度应用的最佳方式，建立一个HTML模板可重复使用的部件像头，侧边栏，页脚等，基本上主要内容是中央DIV这将有其不同的内容路线，页眉和页脚之间将几乎总是相同的，侧边栏可以在某些页面有所不同。
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的
--- 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中
-- header.html
<div id="header">
// ... HTML CONTENT
</div>
这将是最好有在了header.html $ templateCache？就像例如：
would it be better to have header.html in $templateCache ? Like for example:
- header.html中
-- header.html
<!-- CACHE FILE: header.html -->
<script type="text/ng-template" id="header.html">
<div id="header">
// ... HTML CONTENT
</div>
</scipt>
甚至我应该用指令为每个插件，如：<？code>＆LT; appHeader＆GT;＆LT; / appHeader＆GT; ...
哪一个更好性能方面，凝聚力，可重用性和可扩展性，以嵌入在每个屏幕上这些小部件？
Which one is better regarding performance, cohesion, reusability and scalability, in order to embed these widgets on each screen?
推荐答案
您目前选择不需要通过性能所决定的。
Your choice currently need not be dictated by performance.
要开始，如果你把你的谐音服务器或 NG-模板，并将其纳入使用 NG-包括结果是一样的，两者都在$ templateCache缓存。因此，即使从服务器加载部分可能看起来比较慢，这将做一次。我建议，如果你有一个体面的大小部分不使用 NG-模板，并从服务器加载它。
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.
根据您的页面结构，ATLEAST你不需要使用指令页眉和页脚，就不会有这些控件只有单一的渲染。标准 NG-包括与部分，也许联动控制器会怎么做。记住 NG-包括本身就是一个指令，所以没有点对他们的表现进行比较。
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.
希望它帮助。
这篇关于NG-包括NG-模板或指令：其中之一是获得更好的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
