使用ng-view加载页面失效：AngularJS Router本地测试问题求助

嘿，我来帮你排查下AngularJS Router无法加载HTML模板的问题～

你已经知道不能直接本地打开HTML文件，改用localhost测试这点很关键，避开了跨域坑。结合你描述的情况和给出的代码片段，我整理几个最可能的问题点：

1. 别忘了引入ngRoute模块！ #

你的代码里只引入了AngularJS核心库，但路由功能是单独的模块，必须额外引入：

这是新手用AngularJS路由最容易踩的坑！

要在<head>里补充路由模块的CDN链接：

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

同时，你的Angular应用模块必须依赖ngRoute才能启用路由：

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

没做这两步的话，路由完全无法工作，模板自然加载失败。

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

AngularJS的templateUrl路径是相对于index.html所在目录的，很容易因为层级或大小写出错：

• 如果你的文件结构是：

  /index.html
  /templates/page1.html
  /templates/page2.html
  

  那路由里必须写templateUrl: 'templates/page1.html'，不能少了templates/层级；
• 注意文件名大小写！比如你实际文件是Page1.html，但路由写page1.html，在localhost的服务器环境（比如Node的http-server）会区分大小写，直接返回404。

3. 验证服务器能否访问到模板文件 #

直接在浏览器地址栏输入模板的完整URL，比如http://localhost:8080/templates/page1.html，看看能不能正常打开：

• 如果打不开，说明服务器没正确托管这些文件，或者路径写错了；
• 如果能打开，那问题大概率出在路由配置或模块依赖上。

4. 查看浏览器控制台的错误提示 #

按F12打开开发者工具，切换到Console标签页，这里的报错信息是定位问题的关键：

• 出现Uncaught Error: [$injector:modulerr]：基本是没引入ngRoute或者模块依赖写错了；
• 出现GET http://localhost:xxxx/xxx.html 404 (Not Found)：就是模板路径错误，找不到文件。

5. 检查$routeProvider的配置语法 #

确保你的路由配置没有语法错误，比如：

myApp.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    })
    .when('/about', {
      templateUrl: 'about.html',
      controller: 'AboutCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });
});

注意每个.when()的括号、逗号是否正确，otherwise的跳转配置有没有写错。

先从这几个方向排查，应该能快速找到问题所在～

内容的提问来源于stack exchange，提问作者Christian Luneborg