Question

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

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

Answer 1

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

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

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

Answer 3

我刚刚找到另一种在多个视图中包含相同代码的方法：
=＆GT;创建并使用您自己的Angular＆＃39;指令＆＃39;

1）定义一个指令：

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

2）创建您在此处调用的模板＆＃39; widgets / footer.html＆＃39;。
3）使用你的新指令：

<div appfooter></div>

使用的参考文献：

希望这会有所帮助

Answer 4

我建议您将标记移动到页面末尾以改善应用加载时间，因为html加载不会被角度阻挡

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

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

4 个答案: