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

Gre*_*reg 20 angularjs

我刚刚阅读了Angular JS介绍,但我没有看到任何关于编写HTML头代码和页脚代码的方法,只是将其包含在所有页面中.

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

Mar*_*cok 35

如果要创建单页Web应用程序(例如,使用$ routeProvider使用可收藏的视图/页面),可以将页眉和页脚直接放入index.html(或使用ng-include),然后使用ng-view切换在views/pages之间:

<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>
Run Code Online (Sandbox Code Playgroud)

  • 我也觉得这是最好的答案. (2认同)

rai*_*7ow 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>
Run Code Online (Sandbox Code Playgroud)

有了这个,你可以重复使用相同的header.url,并footer.url在所有网页.

  • 在我看来,您不应该在页眉中打开要在页脚中关闭的标签.你需要重新考虑这种做事方式. (4认同)
  • 有一点需要注意:<div ng-include src ="'header.url'"> </ div>,类似于页脚: - 注意标题''周围的''... (3认同)

bol*_*y38 10

我刚刚发现了另一种在多个视图中包含相同代码的方法:
=>创建并使用自己的Angular'指令'

1)定义一个指令:

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

2)创建名为'widgets/footer.html'的模板.
3)使用你的新指令:

<div appfooter></div>
Run Code Online (Sandbox Code Playgroud)

使用的参考文献:

希望这可以帮助