20

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

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

4

4 回答 4

35

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

<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>
于 2012-08-29T18:20:50.017 回答
31

官方的做法是使用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

于 2012-08-29T17:21:39.700 回答
10

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

1）定义一个指令：

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

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

<div appfooter></div>

使用的参考资料：

希望这可以帮助

于 2014-07-10T09:42:57.247 回答
-5

我建议您将标签移动到页面末尾以缩短应用程序加载时间，因为 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>

于 2013-03-03T16:02:04.820 回答