Spring生成含AngularJS脚本的HTML页面时AngularJS不执行的解决方法

核心原因 #

你手动生成并返回的HTML字符串包含了HTML实体转义字符（如<、"），当通过@ResponseBody返回时，Spring会直接将这些转义字符输出到响应中，浏览器会把它们解析成普通文本而非HTML标签，导致AngularJS无法识别DOM结构并初始化，最终页面空白。而直接返回HTML文件时，文件内是原生HTML标签，浏览器能正常解析。

具体修复步骤 #

1. 修正HTML字符串的转义问题 #

确保pageService.getRegionPage返回的是原生HTML标签字符串，而非带有转义实体的版本：

<!doctype html>
<html>
  <head>
    <title>Bhutan</title>
    <script src="/angular/angular.min.js"></script>
    <script src="/angular/angular-animate.js"></script>
    <script src="/angular/angular-route.js"></script>
    <script src="/angular/angular-cookies.js"></script>
    <script src="/js/regionController.js"></script>
  </head>
  <body id="mainPage" ng-controller="regionController as controller" ng-cloak>
    <div ng-include="'/html/regionContent.html'"></div>
  </body>
</html>

避免返回包含<、"这类转义字符的内容，让浏览器能直接解析出HTML元素。

2. 确保响应的字符编码正确 #

在控制器的@RequestMapping中明确指定带UTF-8编码的Content-Type，避免浏览器因编码错误解析异常：

@RequestMapping(path = "/region/{regionId:[\\d]+}", produces = "text/html;charset=UTF-8")
@ResponseBody
public String regionPage(@PathVariable int regionId) {
    return pageService.getRegionPage(regionId);
}

3. 更优方案：使用模板引擎复用代码 #

手动拼接HTML字符串容易出现转义、维护困难等问题，推荐使用Spring支持的模板引擎（如Thymeleaf）来实现代码复用：

控制器代码

@RequestMapping(path = "/region/{regionId:[\\d]+}")
public String regionPage(@PathVariable int regionId, Model model) {
    // 假设通过regionId获取到对应地区信息
    Region region = regionService.getRegionById(regionId);
    model.addAttribute("regionName", region.getName());
    return "region"; // 对应templates目录下的region.html模板
}

Thymeleaf模板（region.html）

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title th:text="${regionName}"></title>
    <script src="/angular/angular.min.js"></script>
    <script src="/angular/angular-animate.js"></script>
    <script src="/angular/angular-route.js"></script>
    <script src="/angular/angular-cookies.js"></script>
    <script src="/js/regionController.js"></script>
  </head>
  <body id="mainPage" ng-controller="regionController as controller" ng-cloak>
    <div ng-include="'/html/regionContent.html'"></div>
  </body>
</html>

这种方式既实现了代码复用，又能避免手动拼接HTML带来的各种问题，同时保持AngularJS的正常执行。

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