使用 AngularJS 更新正文答案

【问题标题】：Updating Body with AngularJS使用 AngularJS 更新正文
【发布时间】：2015-05-16 14:06:01
【问题描述】：

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

这是我目前的代码：

索引.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>

页脚.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;
}

【问题讨论】：

您可以使用 Angular 路由来实现。一个包含演示的好例子可以在这里找到scotch.io/tutorials/…祝你好运！
你应该看看ui-router的角度，我认为它更合适。如果您不想使用 ui-router，您可以使用属性 ng-show="" 来呈现特定模板。换句话说，您保留一个布尔值来表示您是否呈现页面。另一种方法是创建一个过滤器并在 ng-show 上使用过滤器渲染页面。
太棒了，谢谢大家。我对 Angular 很陌生，所以不确定一个好的方法。我认为 ui-router 看起来是个不错的选择！我去研究一下！

标签： html angularjs angularjs-directive

【解决方案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) {


});

【讨论】：