Angular 1.8 ng-view无法加载HTML页面且无报错问题求助

让我帮你一步步排查这个Angular 1.8路由的问题，看起来有几个关键的地方需要调整：

1. 统一路由链接的Hashbang格式 #

Angular 1.6及以后版本默认启用了hashbang模式（也就是#!/前缀），你现在的导航链接混合了#home和#!forecast，导致URL出现#!#home这种异常格式，路由无法正确匹配。

修改index.ejs里的导航链接，统一用#!/开头：

<li class="nav-item active">
  <a class="nav-link" href="#!/home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#!/forecast">Forecast</a>
</li>

2. 修正模板路径与静态资源配置 #

你遇到的404 (Not Found)是因为服务器没有把pages目录设置为静态资源目录，同时你的templateUrl路径也存在问题：

方案一：调整服务器静态资源配置（推荐） #

在根目录的app.js（负责启动本地监听的那个文件）里，添加对pages目录的静态资源托管（假设你用Express框架）：

const express = require('express');
const app = express();

// 托管public和pages目录为静态资源
app.use(express.static('public'));
app.use(express.static('pages')); // 新增这一行

// 其他原有配置...
app.listen(3000, () => console.log('Server running on port 3000'));

然后修改public/js/app.js里的templateUrl路径，去掉多余的../，直接写文件名：

.when('/home', {
  templateUrl: 'home.htm',
  controller: 'homeController'
})
.when('/forecast', {
  templateUrl: 'forecast.htm',
  controller: 'forecastController'
})

方案二：把pages目录移到public下 #

如果不想修改服务器配置，可以把pages目录整个移动到public目录里，这样templateUrl可以写成：

templateUrl: 'pages/home.htm'

同时确保index.ejs里的js路径是正确的（你现在写的assets/js/app.js对应public下的js目录，这个没问题）。

3. 移除重复的ng-controller #

你在<body>标签上添加了ng-controller="homeController"，但路由已经为/home路径指定了这个控制器，这样会导致控制器被实例化两次，可能引发冲突。把body上的ng-controller去掉：

<body>
<!-- 删掉原来的ng-controller="homeController"属性 -->

4. 修正HTML的小错误 #

index.ejs里的样式链接标签写错了，把<hlink>改成标准的<link>：

<link href="assets/style.css" type="text/css" rel="stylesheet" />

验证效果 #

修改完成后重启服务器，点击导航链接，URL会变成http://localhost:3000/#!/home和http://localhost:3000/#!/forecast，此时ng-view应该能正确加载对应的模板内容了。

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