时间戳

首页 > 解决方案 > AngularJS - 错误：[$compile:tpload] 无法加载模板（Spring Boot）

javascript - AngularJS - 错误：[$compile:tpload] 无法加载模板（Spring Boot）

问题描述

我已经在网上检查过类似的问题，但没有一个能满足我的问题。我正在使用angularjs 1.6.4和spring boot构建一个简单的 SPA 。

错误：错误：[$compile:tpload] 无法加载模板：test.html（HTTP 状态：404）

当我不将ngRoute添加到代码中时它工作正常，并且当我尝试使用路由运行它时它无法加载 html 模板。我的后端是带有thymeleaf 模板的 springboot （不确定这是否会导致某种问题），因为在 xampp 服务器中单独运行 UI 代码可以正确提供路由。

我最初认为在 templateUrl 中我提到了错误的路径。这是我的文件夹结构的外观。

在此处输入图像描述

为了减轻压力，我在单个 index.html 中添加了我的整个 JS 代码作为标签。

<!DOCTYPE HTML>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
</head>
<body ng-app="app">
    <ng-view></ng-view>
    <script>
    // Creating Routes (ngRoute)
    var app = angular.module('app', ['ngRoute']);
    app.config(function($routeProvider) {
        $routeProvider.when("/", {
            templateUrl : 'test.html',
            controller : 'postcontroller'
        }).when("/uploadPath", {
            templateUrl : 'test1.html',
            controller : 'uploadPath'
        }).otherwise({
            redirectTo : "/"
        });
    });
    
    // Creating controller
    app.controller("uploadPath", function($scope, $location) {
        $scope.passthrough = function() {
            $location.path('/uploadPath')
        };
    });

    app.controller('postcontroller', function($scope, $http, $location) {
        // be used to decide for showing PostResults
        $scope.postDivAvailable = false;
        // be used for decide for showing GetResults
        $scope.getDivAvailable = false;

        $scope.submitForm = function() {
            // post URL
            var url = $location.absUrl() + "api/config/save";

            // prepare headers for posting
            var config = {
                headers : {
                    'Content-Type' : 'application/json',
                    'Accept' : 'application/json'
                }
            }

            // prepare data for post messages
            var data = {
                xx: $scope.xx,
                yyyy: $scope.yyyy,
                zzzz: $scope.zzzzz
            };

            // do posting
            $http.post(url, data, config).then(function(response) {
                $scope.postDivAvailable = true;
                $scope.postCust = response.data;
            }, function error(response) {
                $scope.postResultMessage = "Error Status: " + response.statusText;
            });

            // reset data of form after posting
            $scope.xx= '';
            $scope.yyyy= '';
            $scope.zzzzz= '';
        }
    });
    
    </script>
</body>
</html>

在 test.html 文件中，我只有一个包含三个字段的表单。这里的问题是，当我加载 localhost:8080/ 时，test.html 本身没有加载并且它会抛出这个错误。

错误：[$compile:tpload] 无法加载模板：test.html（HTTP 状态：404）

任何帮助深表感谢！！

标签： javascriptangularjsspringspring-boot

解决方案

这是我解决问题的方法。我不确定我对这个问题的理解是否正确。如果有人对这个问题有更好的理解，请改进这个答案。

基本上，从src/main/java 文件夹结构中Spring Boot Thymeleaf templating engine获取.html文件。但是当添加路由时，Spring Boot 应用程序期望所有.html文件都在webapp文件夹中。即src/main/webapp。

将 .html 文件放入 webapp 文件夹后解决了该问题。angularJS 路由代码中没有问题。

推荐阅读