ng-route的templateURL无法加载视图问题求助

我之前做AngularJS路由案例时也踩过几乎一模一样的坑，结合你的情况，咱们从几个关键方向一步步排查：

1. 先确认templateUrl的路径写法是否正确 #

你的所有.htm文件都和index.html在同一根目录（C:\Users{User}\Documents\ng-Route），配置路由时要注意路径的相对写法：

• 试试给路径加上相对前缀./，比如把templateUrl: 'green.htm'改成templateUrl: './green.htm'——有时候浏览器解析哈希后的URL时，会搞错相对路径的基准。
• 还要注意文件名的大小写：Windows系统本身不区分，但浏览器偶尔会严格匹配，别写成Green.htm或者green.HTML这种和实际文件名不一致的写法。

2. 打开浏览器开发者工具看具体报错（最直接的排查方式） #

点击路由链接后，按F12打开开发者工具：

• 切换到Console标签，看看有没有404错误提示——这能直接告诉你浏览器找不到哪个文件，路径错在了哪里。
• 切换到Network标签，筛选HTML类型，查看请求green.htm的状态码：如果是404，肯定是路径问题；如果是200但视图不显示，那可能是.htm文件本身的HTML结构有问题（比如没有根元素，或者标签没闭合）。

3. 检查路由配置的$routeProvider是否有语法错误 #

确保你的路由配置没有写错，比如：

var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl: './default.htm' // 替换成你的默认页面
  })
  .when('/green', {
    templateUrl: './green.htm'
  })
  .otherwise({
    redirectTo: '/'
  });
});

另外别忘了在index.html里引入ngRoute的脚本文件，并且在模块依赖里加上['ngRoute']，这是路由生效的前提。

4. 检查<base>标签是否配置正确（很容易忽略的关键点） #

AngularJS的路由依赖<base>标签来解析相对路径，你需要在index.html的<head>里加上：

<base href="./">

如果是后续部署到服务器，可能需要调整href的值，但本地测试时用./就足够了——这个标签会告诉AngularJS所有相对路径的基准位置，少了它很容易出现路径解析错误。

5. 别直接双击打开index.html，用本地服务器运行 #

直接用浏览器打开本地HTML文件时，浏览器用的是file:///协议，会有很多限制（比如路径解析、跨域相关的问题）。建议用简单的本地服务器来运行项目：

• 如果有Node.js，可以全局安装http-server：npm install -g http-server，然后在ng-Route目录下运行http-server，访问http://localhost:8080即可。
• 或者用VS Code的Live Server插件，右键index.html选择「Open with Live Server」，通过HTTP协议访问就能避免很多本地文件协议带来的问题。

按上面的步骤排查，应该就能解决视图不显示的问题了。

内容的提问来源于stack exchange，提问作者Jane Doe