AngularJS：部分视图不呈现答案

【问题标题】：AngularJS: Partial view not renderingAngularJS：部分视图不呈现
【发布时间】：2018-01-19 11:37:41
【问题描述】：

我正在尝试使用 Angular 在单页应用程序中加载部分视图。我已经配置了路由，如下面的脚本文件代码所示。以下是我加载部分视图的代码：

var app = angular.module("myBlogApp", ["ngRoute"])
   .config(function ($routeProvider) {
       $routeProvider
       .when("/view1", {
           templateUrl: "Views/view1.html",
           controller: "view1Controller"
       })
      .when("/view2", {
          templateUrl: "Views/view2.html",
          controller: "view2Controller"
      })
       .when("/view3", {
           templateUrl: "Views/view3.html",
           controller: "view3Controller"
       })
   })
    .controller("view1Controller", function ($scope) {
        $scope.message = "You are in View 1";
    })
    .controller("view2Controller", function ($scope) {
        $scope.message = "You are in View 2";
    })
    .controller("view3Controller", function ($scope) {
        $scope.message = "You are in View 3";
    })

以下是索引页面：

<html ng-app="myBlogApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/Script.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>
                <a href="#/view1">View1</a>
                <a href="#/view2">View2</a>
                <a href="#/view3">View3</a>
            </td>
            <td>
                <div ng-view></div>
            </td>
        </tr>
    </table>
</body>
</html>

但是当我加载 index.html 页面并单击超链接时，我看不到页面上的视图。

显示的 HTML 是：

<h1>View2</h1>
<div>{{message}}</div>

【问题讨论】：

视图中是否有message 绑定？
是的。以下是视图的显示方式：
View2

{{message}}
您使用的是什么 angularjs 版本？你可能需要href="#!/view1" 而不是href="#/view1"。还要检查 console.log 是否有错误（也许你的路径错误）
@AlekseySolovey 是的，这解决了问题。谢谢:)
@Lee 你也可以试试ng-href，我觉得你不用在那儿加#!

标签： angularjs partial-views angular-routing angularjs-routing

【解决方案1】：

在 AngularJS 1.6 版中，他们更改了 URL hash-bang 的哈希前缀。链接现在有 #! 而不是 #。更多信息：commit-aa077e8

要删除哈希前缀 (!)，您需要在配置中包含以下代码：

$locationProvider.hashPrefix('');

【讨论】：

使用 #!view1 而不是 #!/view1 （省略斜线）。这也奏效了。有什么特别的原因吗？
@Lee 不知道，但可能取决于$routeProvider.when() 的工作方式（因为无论出于何种原因它都会忽略/）

【解决方案2】：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

<body ng-app="myApp">


<a href="#!view1">View 1</a>
<a href="#!view2">View 2</a>
<a href="#!view3">View 3</a>


<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/view1", {
        template : "{{message}}",
        controller : "view1Controller"
    })
    .when("/view2", {
        template : "{{message}}",
        controller : "view2Controller"
    })
    .when("/view3", {
        template : "{{message}}",
        controller : "view3Controller"
    });
});
app.controller("view1Controller", function ($scope) {
    $scope.message = "You are in View 1";
});
app.controller("view2Controller", function ($scope) {
    $scope.message = "You are in View 2";
});
app.controller("view3Controller", function ($scope) {
    $scope.message = "You are in View 3";
});

</script>

</body>
</html>

【讨论】：