如何在Angular js中的每个页面上添加标题答案

【问题标题】：How to add header on every page in Angular js如何在Angular js中的每个页面上添加标题
【发布时间】：2015-10-28 13:07:17
【问题描述】：

我正在尝试包含 html page（如标题），但我无法让包含工作。我想创建一个类似header and footer 的页面，并希望这些页面包含在应用程序中的每个html 页面上，就像我们在PHP 中所做的那样。我们创建一个页面并使用include or require 包含它。

如果我有这些代码行

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular Demo</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css.map">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src="js/jquery-2.1.4.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
</head>

现在我想在每个 HTML 页面上包含这些行。我不想在每个页面上都写这些行。

是否可以在 Angular js 中使用 ng-include 或其他方式来执行此操作。

我试过了

<div ng-include src="'include/header.html'"></div>

如果我使用ng-include，它只会在div 中包含一些代码。但是我怎样才能像页眉和页脚一样使用它来包含在每个页面上。

【问题讨论】：

only include some piece of code in div 是什么意思？使用 ng-include 应该可以正常工作。应该更新你的<doctype> BTW
@charlietfl 我知道它包含完整的代码，但我想创建一个标题，它不能包含在 DIV 中
这没有任何意义

标签： php angularjs angularjs-ng-include

【解决方案1】：

对于一般模板，您应该使用 ngRoute 和 ngView ：有一个 html 页面放置您的基础站点，包括一个 ngRoute 根据 url 填充特定内容的视图。

【讨论】：

无法理解您到底想说什么。
@SunilPachlangia 您应该查看this example，他们在其中加载不同的内容，但在每个页面中保持相同的菜单。他们没有在任何地方都包含菜单，而是有一个包含其模板的页面（此处为菜单），该页面将包含不同的内容，具体取决于您单击的链接。

【解决方案2】：

尝试使用 ng-view 和 routeProvider 来填充 ng-view。如图所示：

http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

所以一般情况下，您将拥有一个 index.html，它将有一些静态部分和一些动态 html 部分的代码。静态部分将是您的页眉和页脚，动态部分将由 ng-view 和 routeProvider 控制。

静态部分将在每个页面中保持不变。

【讨论】：

【解决方案3】：

通常 angularJS 使用指令来处理这种行为。标头指令 HTML 示例：

<div id="banner" class="page-header">
  <div class="row text-center">
    <div class="col-lg-10"></div>
    <h3> {{ content.title }} </h3>
    <small>{{ content.strapline }}</small>
  </div>
</div>

示例标头指令 javascript 文件：

(function () {
  angular
    .module('flightApp')
    .directive('pageHeader', pageHeader);

  function pageHeader () {
    return {
      restrict: 'EA',
      scope: {
        content : '=content' 
      },
      templateUrl: '/common/directives/pageHeader/pageHeader.template.html'
    };
  }
})();

您需要将其包含在您的索引文件中。您不需要包含 HTML，指令中的 JS 将引用您的 HTML 文件，因此只需将其添加到您的 index.html：

<script src="/common/directives/pageHeader/pageHeader.directive.js"></script>

我在 html 上传递内容属性。这可以像这样绑定到父范围变量：

<page-header content="vm.header"></page-header>

在父控制器中定义 vm.header 变量的位置：

vm.header = {
      title : 'Flight App (angular edition!)',
      strapline: ''
    };

现在您有了一个可重用的通用标题元素！您可以以这种方式在一行中定义页眉或页脚，并且可以根据指令的位置和使用它的内容来使内容有所不同。如果您在使用它时有任何问题，请告诉我。指令一开始有点令人困惑，但当您熟悉 AngularJS 时，它会成为一个非常强大的工具。

【讨论】：