Question

我想有一个header.html，它定义了我所有网页的标题的样子。如何将此header.html插入顶部的其他网页？

可能有更好的方法来实现共享的公共标头。由于我仍然认为自己是html的新手（但不是编程），我愿意接受更好的建议。

谢谢。

编辑：有用的回复提到使用PHP。但是，我使用AngularJS作为前端，我的PHP后端只是一个纯REST服务器。我的偏好是以AngularJS方式而不是PHP方式。

Answer 1

AngularJS解决方案如下所示：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <script src='angular.js'></script>
  <script src='main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
  <div ng-include src="header.url"></div>
  <script type="text/ng-template" id="header.html"></script>
</div>
</body>
</html>

main.js：

var myApp = angular.module('myApp', []);

function HeaderCtrl($scope) {
    $scope.header = {name: "header.html", url: "header.html"};
}

header.html中：

<p> Header content goes here </p>

我之所以不简单地建议解决方案，例如：<div ng-include="'header.html'">，是为了避免加载标头时出现任何延迟。有关更多信息，请查看angularjs - Point ng-include to a partial that contains a script directive。

或者jQuery会喜欢这个。

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#headerContent").load("header.html"); 
    });
    </script> 
  </head> 
  <body> 
     <div id="headerContent"></div>
  </body> 
</html>

最后，PHP解决方案如下所示：

<html> 
  <head> 
  </head> 
  <body> 
    <?php include('header.html'); ?>  
  </body> 
</html>

祝你好运！

Answer 2

提供的其他答案错过了使用Angular.js的客户端。 Angular实际上是为这个概念而设计的。使用Angular.js有几种不同的方法来实现客户端模板。

使用Angular作为单页应用程序（SPA），您可以动态更改单个HTML文档上的内容，而不是重定向到不同的页面。
使用Angular Directives封装常用页面功能。

您可以结合使用2来实现几乎任何页面布局组合。

使用angular route provider或类似Angular UI-Router的插件，您可以定义一个公共HTML页面，并在HTML页面中使用ng-view指令来表示页面的一部分是动态的在运行时替换。然后，您可以定义填充动态部分的html模板。

使用指令，您可以创建新的HTML元素以设计更具表现力的页面布局。例如，您可以定义一个包含HTML模板，javascript元素甚至业务逻辑的my-menubar指令，然后只需使用类似<div my-menubar />的语法就可以在任何页面上包含菜单栏。指令非常强大，而且我强烈建议您在Angular Developer Guide中阅读相关内容。

可能使用这些功能的简单页面示例：

<div ng-controller=MainController>
    <div main-menu />
    <div ng-view> </div>
    <div page-footer />
</div>

最重要的是，您不需要服务器来执行可重现代码的逻辑，因为Angular.js就是为此目的而设计的。

Answer 3

我通常处理此问题的方式是，它允许的不仅仅是标题，而是shell.html

可能看起来像这样：

<div ng-controller="ShellController">
  <div ng-include="'app/shell/header/header.html'"></div>
  <div ng-view></div>
  <div ng-include="'app/shell/footer/footer.html'"></div?>
</div>

你在ng-including静态位，并且你正在使用Angulars ngRoute（或ui-router）

如何在AngularJS中为所有网页共享一个公共标题？

3 个答案: