Question

尝试构建一个具有相同页眉和页脚的小型网站，但更新正文部分。目前，我在index.html中显示了页眉，正文和页脚页面，但在单击按钮加载page_02时不确定如何更新正文部分。

这是我到目前为止的代码：

的index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Page Management</title>
    <script src="../../Scripts/angular.min.js"></script>
    <script src="controller.js"></script>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <div ng-controller="pageManager">
       <div ng-include="header = 'header.html'"></div>
       <div ng-include="body = 'page1.html'"></div>
       <div ng-include="footer = 'footer.html'"></div>
    </div>
</body>
</html>

了header.html

<div class="mainHeader">
    <h1>Header</h1>
    <form action="page2.html">
        <input type="submit" value="Load Page_02">
    </form>
</div>

page1.html

<div class="page1">
    <h1>Body - Page_01</h1>  
</div>

page2.html

<div class="page2">
    <h1>Body - Page_02</h1>
</div>

footer.html

<div class="mainFooter">
    <h1>Footer</h1>
</div>

controller.js

angular.module('myApp', [])
    .controller('pageManager', function($scope) {
        $scope.header = "header.html";
        $scope.body = "page1.html";
        $scope.footer = "footer.html";
    });

styles.css的

* {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.mainHeader {
    background-color: red;
    width: 100%;
    height: 150px;
    text-align: center;
}

.mainFooter {
    background-color: green;
    width: 100%;
    height: 500px;
    text-align: center;
}

.page1 {
    background-color: grey;
    width: 100%;
    height: 500px;
    text-align: center;
}

.page2 {
    background-color: blue;
    width: 100%;
    height: 500px;
    text-align: center;
}

Answer 1

您可以使用ngRoute或ui.router，请使用ngRoute http://plnkr.co/edit/sFcpDrGMy3CmsKJgTZH1?p=preview

查看此处的演示

<body ng-app="newappt">
  <div class="mainHeader">
    <h1>Header</h1>
    <a href="#/page1">Page 1</a> | <a href="#/page2">Page 2</a>
  </div>
  <div ng-view="" class="container"></div>
  <div class="mainFooter">
    <h1>Footer</h1>
  </div>
</body>

和js：

var newappt = angular.module('newappt', ['ngRoute']);


newappt.config(function($routeProvider) {
  $routeProvider
    .when('/page1', {
      templateUrl: 'page1.html',
      controller: 'pageManager'


    })
    .when('/page2', {
      templateUrl: 'page2.html',
      controller: 'pageManager'
      })

  .otherwise({
    redirectTo: '/page1'
  });
});

newappt.controller('pageManager', function($scope) {


});

使用AngularJS更新Body

1 个答案: