将 header.html 导入每个 html 页面答案

【问题标题】：importing header.html into every html page将 header.html 导入每个 html 页面
【发布时间】：2015-10-12 14:22:26
【问题描述】：

我想使用 AngularJS 在我使用的每个 html 中包含一个标题。这是header.html：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
  <div class="container-fluid" id="container-fluid1">
    <div class="navbar-header" id="websiteName">
      <a class="navbar-brand" href="#">Richazon</a>
    </div>
    <div id="theLinks">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Navbar Color <b class="caret"></b></a>
                <ul class="dropdown-menu" id="dropdown-menu1">
                    <li class="greenBg"><a href="#">NB1</a></li>
                    <li id="greenBg"><a href="#">NB2</a></li>
                    <li id="greenBg"><a href="#">NB3</a></li>
                </ul>
        </li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Page 2 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 2.0.0 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 2.0.1 </a></li>
                    <li class="divider"></li>
                    <li><a href="AngularListRemoval.html">AngularJS List Removal </a></li>
                </ul>
        </li>

        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Page 3 <b class="caret"></b></a>
                <ul class="dropdown-menu" id="dropdown-menu">
                    <li><a href="#">Page 3.0.0 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 3.0.1 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 3.0.3 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 3.0.4 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 3.0.5 </a></li>
                    <li class="divider"></li>
                    <li><a href="#">Page 3.0.6 </a></li>
                </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

</body>
</html>

在我的 index1.html 文件中，我有这个：

<html lang="en" ng-app="myApp">

然后在body标签内

<div appheader></div>

我知道这个问题已经被问过，因此我的实施。但我在控制台中不断收到此错误：Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)

这是我的 index1.html 文件顶部的代码，可能会导致问题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  <link href="css/index1.css" rel="stylesheet">

这是我的 main.js：

angular.module('myApp')
  .directive('appheader', function() {
    return {
      templateUrl: 'header.html'
    };
  });

【问题讨论】：

在索引中，您将 Angular 脚本链接两次（版本 1.3.14，然后是版本 1.0.1）。而且bootstrap也链接了两次
模板不应包含<head> 和<body>
删除了这些标签，但标题仍然不可见
header.html 应该只包含nav 元素。你真的需要自定义指令吗？请改用ng-include。
您必须来自像 PHP 这样的语言，您可以在其中包含整个模板页面，但这不是继续使用 Angular 的正确方法。如果你不想用 javascript 制作动态 HTML 模板，请使用 Jade 或 Hogan，但必须使用 Angular 作为前端框架。页面中的元素可能会包含在内，但您不能在整个页面上附加 <html> 和 <body> 标记，除非它位于 iframe 中。

标签： javascript html angularjs navbar

【解决方案1】：

如果这是你的 main.js

angular.module('myApp')
.directive('appheader', function() {
  return {
  templateUrl: 'header.html'
  };
});

你需要创建模块

angular.module('myApp',[])

【讨论】：