AngularJS调用Spring Boot控制器出现TemplateInputException异常求助

嘿，我来帮你梳理下这个问题——你现在遇到的异常，大概率是因为混淆了Thymeleaf服务器端渲染和AngularJS客户端数据请求的逻辑，再结合TemplateInputException的常见诱因，咱们一步步排查解决：

1. 先排查最基础的模板问题 #

TemplateInputException最常见的触发原因就是Thymeleaf找不到你指定的模板文件，先确认这几点：

• 检查ManualChargesListV2.html是否放在Spring Boot默认的Thymeleaf模板目录：src/main/resources/templates/
• 文件名要完全匹配（注意大小写，Linux服务器上大小写敏感）
• 打开模板文件，检查有没有Thymeleaf语法错误（比如th:each表达式写错、标签未闭合这类低级问题）

2. 区分「页面渲染」和「数据接口」的逻辑 #

你提到用AngularJS调用控制器加载下拉框数据，但当前控制器返回的是ModelAndView——这是用来让服务器渲染整个页面的，和AngularJS的使用逻辑完全冲突：

• AngularJS作为前端框架，需要的是后端返回JSON格式的数据，而不是渲染好的HTML页面
• 正确的做法是把控制器拆成两个独立的部分：
  一个负责返回初始页面（供用户访问），另一个专门提供数据接口（供AngularJS调用）

修正后的控制器代码示例 #

// 负责返回Thymeleaf渲染的初始页面
@GetMapping(value="/manualbillentry/page")
public ModelAndView showManualBillPage(HttpSession session) {
    ModelAndView model = new ModelAndView();
    WrpSession wrpsession = (WrpSession) session.getAttribute("totalObj");
    // 如果需要给初始页面传递基础数据，在这里添加即可
    model.setViewName("ManualChargesListV2");
    return model;
}

// 专门供AngularJS调用的API，返回下拉框所需的JSON数据
@GetMapping(value="/manualbillentry/charges")
@ResponseBody // 关键注解：告诉Spring返回JSON，而非视图模板
public List<YourChargeEntity> fetchUnitCharges(HttpSession session) {
    WrpSession wrpsession = (WrpSession) session.getAttribute("totalObj");
    try {
        // 这里写获取下拉框数据的业务逻辑，比如从数据库查询
        List<YourChargeEntity> chargeList = yourChargeService.getUnitCharges();
        return chargeList;
    } catch (Exception e) {
        // 异常处理：可以返回空列表或抛出自定义业务异常
        e.printStackTrace();
        return Collections.emptyList();
    }
}

AngularJS调用数据接口的示例 #

// 在你的AngularJS控制器中调用后端API
angular.module('yourApp').controller('ChargesController', function($scope, $http) {
    // 请求下拉框数据
    $http.get('/manualbillentry/charges')
        .then(function(response) {
            $scope.chargeOptions = response.data; // 把数据绑定到页面下拉框
        })
        .catch(function(error) {
            console.error('加载下拉框数据失败:', error);
        });
});

3. 如果要在Thymeleaf页面里混合AngularJS #

要是你确实需要在Thymeleaf渲染的页面里用AngularJS（比如初始页面用Thymeleaf渲染，后续交互用AngularJS），得避开两者的语法冲突：

• Thymeleaf和AngularJS默认都用{{}}作为插值符号，会导致解析冲突，你可以修改AngularJS的插值符号：

<script>
angular.module('yourApp', []).config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});
</script>

• 确保Thymeleaf模板本身能正常渲染，没有语法错误，否则还是会触发TemplateInputException

4. 从异常堆栈找精准原因 #

如果以上步骤都排查过还是有问题，一定要看异常的完整堆栈信息：

• 如果堆栈提示Error resolving template "ManualChargesListV2"，那就是模板路径/文件名的问题
• 如果提示模板内语法错误，会明确指出具体行号和错误类型，针对性修复即可

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