Angular视图无法加载：ng-view点击链接后页面空白求助

嘿，我来帮你捋捋这个ng-view点击后空白的问题——这种情况我碰到过好多次，大概率是几个容易疏忽的小问题导致的，咱们一步步排查：

• 先确认路由模块的引入和依赖
  ng-view是AngularJS的ngRoute模块提供的，这一步最容易漏掉：

  1. 确保你在index.html里引入了路由文件，比如：

     <script src="angular-route.js"></script>
     

     （注意路径要正确，别出现404错误）
  2. 你的应用模块必须声明依赖ngRoute，比如：

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

     没加这个依赖的话，$routeProvider根本没法工作，ng-view自然不会渲染内容。

• 检查路由配置的细节

  1. 核对templateUrl的路径是否正确：比如你写的'views/home.html'，要确保这个文件确实在对应位置，相对路径很容易出错（比如index.html在根目录，views文件夹要和它同级）。
  2. 确认路由里指定的controller已经正确定义，如果控制器不存在，也可能导致页面空白（部分情况下控制台会报错，也有静默失败的情况）。
  3. 检查拼写错误：比如templateUrl写成小写的templateurl，when拼错成wen，这些大小写或拼写错误都会导致路由失效。

• 一定要看浏览器控制台的报错
  按F12打开开发者工具，切到Console标签页，红色报错信息是定位问题的关键：

  • 有没有404错误？比如找不到angular-route.js或者模板文件
  • 有没有Unknown provider: $routeProvider？这就是没加ngRoute依赖的典型报错
  • 有没有控制器未定义的错误？

• 检查ng-view和跳转链接的写法

  1. ng-view标签要写对：必须是<div ng-view></div>，别写成ng-view="xxx"或者拼错成ngview
  2. 跳转链接要用ng-href而不是普通href：比如<a ng-href="#/home">Home</a>，用普通href会导致页面刷新，而非Angular的路由跳转，也会出现空白。同时要确保链接的哈希路径（比如#/home）和路由配置里的when路径完全一致。

• 检查默认路由的配置
  如果你用了$routeProvider.otherwise()，要确保它指向的路由是存在的，比如：

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

  那/404的路由必须已经配置了对应的模板和控制器，否则会跳转到空白页面。

如果排查完这些还是没解决，可以把你的路由配置代码贴出来，我再帮你细查！

内容的提问来源于stack exchange，提问作者Dan Karlin