AngularJS单页应用中Partial View无法渲染问题排查

看起来你已经把AngularJS路由的基础配置都搭起来了，但点击链接后视图没显示，我帮你梳理几个最可能的问题点和解决办法：

首先，先把你提供的代码整理成更易读的格式，方便排查：

你的Script.js代码 #

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";
    });

你的Index.html代码 #

<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>

视图文件示例（view2.html） #

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

接下来是具体的排查步骤：

• 先查文件路径是否正确
  这是最常见的问题！打开浏览器F12，切换到「Network」标签，点击View1链接，看看请求里有没有view1.html的条目，如果是404状态，说明路径错了。
  确认你的文件结构：如果Index.html在根目录，那Views文件夹必须和它同级，不然要调整templateUrl的路径，比如Views在Scripts文件夹下的话，要写成"Scripts/Views/view1.html"。

• 检查Angular版本是否匹配
  一定要保证angular.min.js和angular-route.min.js的版本完全一致，比如都是1.8.2。版本不匹配会导致路由模块无法正常注册，直接失效。

• 添加默认路由（可选但推荐）
  你的路由配置里没有默认跳转规则，首次加载页面时URL是#/或者空，没有匹配的路由。可以在路由配置最后加一行：

  .otherwise({ redirectTo: "/view1" })
  

  这样打开页面就会自动加载View1，也能避免无匹配路由的情况。

• 查看控制台错误提示
  切换到F12的「Console」标签，看看有没有Angular抛出的错误，比如「模块找不到」「控制器未定义」这类提示，这些会直接告诉你问题出在哪。

• 确认视图文件内容完整
  每个view.html文件都要放在Views文件夹下，内容要正确，比如view1.html里要写<h1>View1</h1>和对应的{{message}}标签，不能有语法错误。

按照这些步骤排查，应该就能解决视图不显示的问题了！

内容的提问来源于stack exchange，提问作者Sanjalee Patni