AngularJS与Spring Boot集成：ng-view加载文件时404错误求助

嘿，刚入门AngularJS和Spring Boot就碰到这个问题确实闹心，我帮你拆解下可能的原因和对应的解决办法：

1. 先排查前端路由的路径问题 #

你在app.js里写的templateUrl : "/pages/login.html"用了绝对路径，这很可能是问题根源：

• Spring Boot默认会把src/main/resources/static、src/main/resources/public这些目录作为静态资源根目录。如果你的login.html放在static/pages/下面，正确的相对路径应该去掉开头的斜杠，写成：

templateUrl : "pages/login.html"

• 要是你坚持用绝对路径，得确保和Spring Boot的上下文路径匹配。比如你的应用启动后访问路径是http://localhost:8080/myapp，那templateUrl就得写成/myapp/pages/login.html，但新手用相对路径会更省心。

2. 处理Spring Boot对前端路由的拦截 #

AngularJS是单页应用，前端路由的URL（比如/）会被Spring Boot当成后端接口请求，直接返回404。这时候需要给Spring Boot加一个转发控制器，把所有前端路由的GET请求都转发到你的主页面（就是包含ng-view的那个index.html）：

@Controller
public class FrontendForwardController {
    // 排除后端接口路径，只转发前端路由请求
    @RequestMapping(value = "/**", method = RequestMethod.GET)
    public String forwardToIndex() {
        return "forward:/index.html";
    }
}

⚠️ 注意：如果你的后端有其他GET接口，一定要在这个控制器之前定义，避免被错误转发。比如你的/是POST接口，所以不会和这个GET请求的转发冲突，没问题。

3. 确认静态资源的位置和命名 #

• 检查login.html是不是真的放在了Spring Boot的静态资源目录下，比如src/main/resources/static/pages/login.html
• 注意大小写！如果是Linux或者部署到Linux服务器上，Login.html和login.html是两个不同的文件，别写错名字

4. 顺便优化下你的$http请求 #

你控制器里的$http.post('http://localhost:8080/')用了绝对路径，部署到其他环境会有跨域或者路径错误的问题，建议改成相对路径：

// 用相对路径，自动匹配当前域名和端口
$http.post('/')
    .then(function(response) {
        $scope.companies = response.data;
        // 这里写你的后续逻辑
    })
    .catch(function(error) {
        console.error('请求出错:', error);
    });

另外AngularJS的success()方法已经被废弃了，官方推荐用then()和catch()来处理异步请求。

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