14

我想知道设计一个关于性能的角度应用程序的最佳方法，用于构建一个带有可重用小部件（如页眉、侧边栏、页脚等）的 HTML 模板。基本上主要内容是中央 DIV，其内容将在路线之间变化，页眉和页脚几乎总是相同的，侧边栏在某些页面中可能会有所不同。

--- 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>

在 $templateCache 中有 header.html 会更好吗？例如：

-- header.html

<!-- CACHE FILE: header.html -->
<script type="text/ng-template" id="header.html">
    <div id="header">
       // ... HTML CONTENT 
    </div>                    
</scipt>

甚至我应该为每个小部件使用指令，例如：<appHeader></appHeader>...？

为了在每个屏幕上嵌入这些小部件，哪一个在性能、凝聚力、可重用性和可扩展性方面更好？

4

3 回答 3

16

您当前的选择不需要由性能决定。

首先，如果您将您的部分放在服务器上或ng-template其中并包含它们ng-include，结果是相同的，并且两者都缓存在 $templateCache 中。因此，即使从服务器加载部分内容可能看起来更慢，这也会完成一次。我建议如果您的部分尺寸合适，请不要使用ng-template并从服务器加载它。

根据您的页面结构，至少对于不需要使用指令的页眉和页脚，这些控件将只有一次呈现。ng-include带有部分或链接控制器的标准可以做到。请记住ng-include，它本身就是一个指令，因此没有必要在性能上进行比较。

当您想要一个需要跨页面使用的组件时，指令将很有用，您的页眉和页脚导航不符合此要求，因为页面上有这些元素的单个实例。

希望能帮助到你。

于 2014-03-01T03:57:17.437 回答
8

我更喜欢指令，因为 ng-include 仅将视图部分分解为更小的模块。通过使用指令，即使只使用一次，您仍然可以很好地将页面模块化为更小的独立组件。父页面的标记看起来更好，您不必使用更多方法来弄乱您的控制器。通过一些技巧，您甚至可以通过 scope.$digest（而不是默认的 $rootScope.digest）处理特定于指令的事件和远程调用，这将提高性能。此外，如果需要，您的指令可以直接进行 DOM 操作。

于 2014-10-24T12:41:22.963 回答
7

我在一个视图中将两者的性能与大型嵌套列表（最多 1000 个条目，4 级深度）进行了比较。

结论

指令比渲染大型数据结构快50 - 100% 。ng-include如果您必须渲染大量复杂/嵌套的数据，尤其是递归的东西 - 使用指令。

此外，对于功能元素（小部件、过滤器输入等），指令更适用，因为您的逻辑位于模块内，而不是在控制器中的某个地方浮动。

有关递归的更多参考，请参见此处：Angular 指令中的递归

当您只是试图将应用程序划分为逻辑部分（标题、侧边栏等）时ng-include可能会更好。要记住的一件事是，通过ng-include. 使用指令有时会有点棘手。

于 2016-02-02T22:17:30.660 回答