我想知道设计一个关于性能的角度应用程序的最佳方法，用于构建带有可重用小部件（如页眉、侧边栏、页脚等）的 HTML 模板。 基本上主要内容是中央 DIV，其内容在路线之间会有所不同，页眉和页脚几乎总是相同的，侧边栏在某些页面中可能会有所不同。
---指数.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>
-- 标题.html
<div id="header">
// ... HTML CONTENT
</div>
$templateCache中有标题.html会更好吗？例如：
-- 标题.html
<!-- CACHE FILE: header.html -->
<script type="text/ng-template" id="header.html">
<div id="header">
// ... HTML CONTENT
</div>
</scipt>
或者甚至我应该为每个小部件使用指令，例如：<appHeader></appHeader> ...？
在每个屏幕上嵌入这些小部件，哪一个在性能、内聚力、可重用性和可扩展性方面更好？
您的选择目前不需要由性能决定。
首先，如果您将部分放在服务器上或ng-template并使用ng-include包含它们，则结果是相同的，并且两者都缓存在$templateCache中。因此，即使从服务器加载部分内容看起来更慢，这也将完成一次。我建议如果你有一个体面的大小部分不要使用ng-template并从服务器加载它。
根据页面结构，至少对于页眉和页脚，您不需要使用指令，这些控件将只有单一呈现。带有部分控制器的标准ng-include，也许是链接的控制器就可以了。请记住ng-include本身就是一个指令，因此没有必要在性能上比较它们。
指令在您想要需要跨页面使用的组件时很有用，您的页眉和页脚导航不符合此要求，因为页面上有这些元素的单个实例。
希望对您有所帮助。
我更喜欢指令，因为 ng-include 仅将视图部分分解为较小的模块。通过使用指令，即使它只使用一次，您仍然可以很好地将页面模块化为更小的独立组件。父页面的标记看起来更好，您不必用更多方法弄乱控制器。通过一些技巧，您甚至可以通过 scope.$digest（而不是默认的 $rootScope.digest）处理特定于指令的事件和远程调用，这将对性能更好。此外，如果需要，您的指令可以执行直接的 DOM 操作。
我比较了两者在具有大型嵌套列表（最多 1000 个条目，4 级深度）的视图中的性能。
结论
在渲染大数据结构方面，指令比ng-include快 50 - 100%。如果你必须渲染大量复杂/嵌套的数据，尤其是递归的东西 - 使用指令。
同样对于功能元素（小部件、过滤器输入等），指令更适用，因为您的逻辑位于模块内，而不是在控制器中的某个地方浮动。
有关递归的更多参考，请参见此处：Angular 指令中的递归
当您只是尝试将应用程序划分为逻辑部分（标题、侧边栏等）时 ng-include可能更好。要记住的一件事是，通过 ng-include 访问控制器的范围更容易。使用指令，这有时会变得有点棘手。