AngularJS路由失效求助：ng-view点击后空白且无控制台报错

作为AngularJS初学者，碰到路由渲染空白但控制台没报错的情况，大概率是几个容易忽略的配置细节出了问题，我给你梳理下最常见的排查方向：

1. 确认路由模块是否正确引入并依赖 #

AngularJS的路由功能不是核心库自带的，你得单独引入angular-route.js，还要在你的应用模块里声明依赖ngRoute：

<!-- 注意引入顺序：先核心库，再路由库 -->
<script src="angular.js"></script>
<script src="angular-route.js"></script>

// 应用模块必须依赖ngRoute才能使用路由
var myApp = angular.module('myApp', ['ngRoute']);

2. 检查路由配置的模板路径是否正确 #

确保templateUrl的路径和你的实际文件位置匹配，比如home.html和index.html在同一文件夹下的话，路径应该写'home.html'，别加前缀/（加了会从网站根目录查找，可能找不到文件）：

myApp.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html',
      controller: 'HomeController' // 如果用到控制器，也要确保控制器已经定义
    })
    .when('/courses', {
      templateUrl: 'courses.html',
      controller: 'CoursesController'
    })
    .otherwise({ redirectTo: '/' });
});

3. 锚点标签的写法要符合AngularJS路由要求 #

别用普通的href直接写路径，要么用ng-href指令，要么给href加上#/前缀，避免页面刷新导致路由失效：

<!-- 推荐写法：使用ng-href -->
<a ng-href="#/">Home</a>
<a ng-href="#/courses">Courses</a>

<!-- 也可以用带#的href -->
<a href="#/">Home</a>
<a href="#/courses">Courses</a>

4. 确认ng-view指令没有拼写错误 #

检查index.html里的ng-view是否正确书写，有没有写成ng-view=""或者拼写错误：

<!-- 正确的ng-view放置方式 -->
<div ng-view></div>

5. 验证模板文件本身是否正常 #

有时候模板文件home.html或courses.html可能为空，或者有未闭合的HTML标签这类隐性错误，你可以先在模板里写一段简单的测试内容，比如：

<!-- home.html测试内容 -->
<h1>这是Home页面</h1>
<p>测试路由是否正常渲染</p>

如果上面这些排查点都没问题，建议你把index.html的完整代码、路由配置的JS代码以及模板文件的代码贴出来，这样我就能帮你精准定位问题啦~

内容的提问来源于stack exchange，提问作者R K