我正在创建一个spring-boot web应用程序。我是spring-boot和AngularJS的新手，尝试过将其集成到我的应用程序中，但没有成功。我有一个JSON页面，我想在HTML页面（"index.html"）中将其格式化为表格，但我的AngularJS变量在此页面上不可见。我根据YouTube上的此教程格式化了一些HTML代码：https://www.youtube.com/watch?v=fUtVRKoBlbQ&list=PLVApX3evDwJ1i1KQYCcyS9hpSy_zOgU0Y&index=6。我已经附上了JSON页面以及我的JavaScript代码、HTML文件和编译程序的结果：
JavaScript语言：
var app = angular.module("User", []);
app.controller("UsersController", function($scope, $http) {
$http.get("http://localhost:7070/user/all")
.success(function(result) {
$scope.tickets = result.tickets
})
});超文本：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/static/app/users.controller.js" th:src="@{/app/users.controller.js}"></script>
</head>
<body>
<base href>
<header th:insert="fragments.html :: nav"></header>
<!-- Page content goes here -->
<div class="container">
<p>This is User\Index. Only people with role_user can see this.</p>
<div ng-app="User" ng-controller="UsersController">
<ul>
<li ng-repeat="t in tickets">
{{t.ticket_id}} - {{t.title}} - {{t.body}}
</li>
</ul>
</div>
</div>
</body>
</html>JSON格式：A screenshot of the tickets (JSON) (
结果：A screenshot of the result when I compile my code
3条答案
按热度按时间idfiyjo81#
请注意，我非常怀疑这是最好的解决方案。它对我很有效，所以我将它贴在这里。在我的HTML文件中，我将开始的body标签
<body>移到第4行，就在开始的head标签<head th:insert="fragments.html :: headerfiles">下面。我还按照Ciao Costa在前面的答案中的建议删除了static，https://stackoverflow.com/users/4405995/caio-costa。下面是删除static的链接：（图片没有显示使用thymeleaf和spring）我做的另一个小改动是将变量{{t.ticket_id}}更改为{{t.id}}，但这只是因为JSON将其显示为
id超文本：
结果：
eqzww0vc2#
由于您的屏幕仍然显示
{{ }}，我们知道ng-app没有正确初始化。第一个好的方法是查看控制台，因为初始化ng-app失败通常会导致错误消息。如果
ng-app已经初始化，即使您试图在scope中访问的变量是undefined，您也不会看到花括号。当AngularJS初始化正确，但没有找到您要在DOM中呈现的变量时，它只会将其留空，然后像什么都没发生一样继续操作。在这种情况下，它也不会显示错误消息。
我做了一些测试，我相信问题出在这里：
看起来
th:src正在破坏您的应用程序，因为它无法找到文件，从而生成模块错误。请尝试按以下方式使用：
或者：
如果以上方法都不起作用，请尝试卸下
static。pqwbnv8z3#
有时候，当您忘记在终端内点击ng service时，就会发生这种情况。