Question

我有一个带有页眉，主页和页脚的html页面（我使用materialize和angularJS）。我总是希望页眉和页脚保持不变，但是当我按下sidenav中的链接时，我希望主元素是另一个html页面。假设我按下sidenav中的info链接，我希望页眉和页脚保留，但是我从html的主要部分移动到另一个页面。这就是我到目前为止所做的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>MyPage</title>
  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>

<body  ng-app="myPage" ng-controller="mainCtrl">
  <header>
    <ul id="sidenav" class="side-nav fixed light-blue lighten-1">
      <li><a id="page" class="white-text text-accent-1" href="#">Home</a> </li>
      <br/><br/>
      <li><a id="page1" class="white-text text-accent-1" href="#"><b>Info</b></a></li>
      <li><a id="page2" class="white-text text-accent-1" href="#"><b>Another page</b></a></li>
      <li><a id="page3" class="white-text text-accent-1" href="#"><b>Even one more page</b></a></li>
    </ul>
  </header>

  <main>
    <div id="main">
        <p> Some text for main page here </p>
     </div>
  </main>

  <footer class="page-footer orange">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">About</h5>
          <p class="grey-text text-lighten-4">
            About my company.
          </p>
        </div>
      </div>
    </div>
  </footer>


  <!--  Scripts-->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="controllers/mainCtrl.js"></script>
</body>
</html>

这可能非常简单，但我还没有找到如何能够来回切换，以及保持页眉和页脚。我试图将新的html页面链接到，但后来我必须复制页眉和页脚，这是不理想的。如果我想更改sidenav，我不想要编辑10-15个html页面。

Answer 1

您必须设置路由器并在某些html元素上添加ng-view指令：

...
</header>
<div ng-view>
    <main>
       ...
    </main>
</div>
<footer class="page-footer orange">
...

简单路由示例：

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'home.html',
        controller: 'homeCtrl',
      );
}]);

如果您使用侧边栏链接

<a id="page" class="white-text text-accent-1" href="#/home">Home</a>

routeProvider会在已定义的元素和home.html指令之间加载homeCtrl和ng-view

使用angularJs重定向 - 但仅在div / main元素内部

1 个答案: