如何让 AngularJS 中的所有网页共享一个公共标头？答案

【问题标题】：How to have a common header shared by all webpages in AngularJS?如何让 AngularJS 中的所有网页共享一个公共标头？
【发布时间】：2014-06-19 18:34:50
【问题描述】：

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

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

谢谢。

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

【问题讨论】：

这是服务器端代码的工作，例如。在 PHP 中，您将有一个 header.php（或 .html），在索引或每个页面中，取决于它的设置方式，您将拥有类似 include('header.php'); 的内容
看我对this问题的回答。
感谢您提供有关使用 PHP 的提示。但是，我使用 AngularJS 作为前端，而我的 PHP 后端只是一个纯 REST 服务器。我需要用 AngularJS 的方式来做这件事。

标签： html angularjs

【解决方案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>

祝你学习顺利！

【讨论】：

谢谢！另一个侧面问题。我测试了<div ng-include="'header.html'"> 也很好用。但是，<div ng-include="header.html"> 没有。为什么我需要在 header.html 中包含额外的“”？顺便说一句，如果我的 header.html 变得太大并且加载太慢，我将使用您的解决方案
因为 Angular 试图找到 $scope.header.html 而不是字符串文字 header.html

【解决方案2】：

我通常处理这个问题的方式，它允许的不仅仅是一个标题，是有一个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）

【讨论】：

谢谢。简单、优雅的解决方案。

【解决方案3】：

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

将 Angular 用作单页应用程序 (SPA)，您可以在其中动态更改单个 HTML 文档上的内容，而不是重定向到不同的页面。
使用 Angular 指令封装常见的页面功能。

您可以使用这两者的组合来实现几乎任何页面布局的组合。

使用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 正是为此目的而设计的。

【讨论】：