Angular JS - 如何处理重复的 HTML 代码，如页眉/页脚？答案

【问题标题】：Angular JS - How to handle duplicated HTML code like headers/footers?Angular JS - 如何处理重复的 HTML 代码，如页眉/页脚？
【发布时间】：2012-08-29 17:06:46
【问题描述】：

我刚刚阅读了introduction to Angular JS，但我没有看到任何关于一次编写 HTML 页眉代码和页脚代码并将其包含在所有页面中的方法。

是否有官方/推荐的方式来做到这一点？

【问题讨论】：

标签： angularjs

【解决方案1】：

如果您正在创建单页 Web 应用程序（例如，使用 $routeProvider 的可收藏视图/页面），您可以将页眉和页脚直接放入 index.html（或使用 ng-include），然后使用 @987654321 @ 在视图/页面之间切换：

<html ng-app>
<head>
   <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
   ... header here, or use ng-include ...
   <div ng-view></div>
   ... footer here, or use ng-include ...
</body>
</html>

【讨论】：

+1 来自我。老实说，我认为ngInclude 在将更多或更少的外部内容插入页面时最有帮助。但是页眉/页脚通常是页面布局的一部分。
我也觉得这是最好的答案。

【解决方案2】：

官方的做法是使用ngInclude指令，即"fetches, compiles and includes an external HTML fragment".

<html ng-app>

<head>
  <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>

<body>
  <div ng-include src="'header.url'"></div>
  ...
  <div ng-include src="'footer.url'"></div>
</body>

</html>

这样，您可以在所有页面中重复使用相同的 header.url 和 footer.url。

【讨论】：

有一个小警告：
，类似地对于页脚：- 注意 header.url 周围的 ''。 ..
这样的问题是，如果页眉包含的 HTML 具有不关闭的标签，因为它们在页脚中关闭。这不起作用，因为如果您没有这样做，ng-include 会自动关闭标签。另一个问题是，如果您希望更改页眉和页脚，例如在登录或注销页面时不显示。
在我看来，您不应该在您打算在页脚中关闭的页眉中打开标签。你需要重新考虑这种做事方式。

【解决方案3】：

我刚刚找到了另一种在多个视图中包含同一段代码的方法：
=> 创建和使用你自己的 Angular '指令'

1) 定义一个指令：

angular.module('myApp')
  .directive('appfooter', function() {
    return {
      templateUrl: 'widgets/footer.html'
    };
  });

2) 在此处创建名为“widgets/footer.html”的模板。
3) 使用你的新指令：

<div appfooter></div>

参考文献：

希望对你有帮助

【讨论】：

我想知道什么时候使用这种方法比使用 ngInclude 更有利？
@eflat 跟随stackoverflow.com/questions/22108719/… 也许 ngInclude 比指令更好。你对 ;)
在较大的应用程序上，指令方法使应用程序更加模块化，如果需要，可以将 html 清洁器和附加代码封装在与页眉或页脚相关的指令中，从而使其更具可扩展性。我想这是个人选择，在大多数情况下 ng-include 或在 index.html 中包含页眉和页脚就足够了。

【解决方案4】：

我建议您将标签移到页面末尾以缩短应用程序加载时间，因为 html 加载不会被 angular 阻止

</head>
<body>
   <div ng-include src="header.url"></div>
   ...
   <div ng-include src="footer.url"></div>

   <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

</body>

【讨论】：

这确实应该是对原始问题的评论，因为它没有解决问题。