Question

我尝试添加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页面上包含这些行。我不想在每个页面上都写这些行。

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

我试过这个

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

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

Answer 1

对于一般模板，你应该使用ngRoute＆amp; ngView：有一个html页面铺设你的基站包括一个视图，ngRoute根据网址填充特定内容。

Answer 2

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

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

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

静态部分在每页都保持不变。

Answer 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上传递了content属性。这可以绑定到父范围变量，如下所示：

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

在父控制器中，您可以定义vm.header变量：

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

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

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

3 个答案: