Question

我正在创建一个 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
    })
});

HTML：

<!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

Answer 1

请注意，我非常怀疑这是最佳解决方案。它对我有用，所以我会在这里发布。在我的 HTML 文件中，我将起始正文标记 <body> 移至第 4 行，紧接在起始标题标记 <head th:insert="fragments.html :: headerfiles"> 下方。我还按照 Ciao Costa 在之前的回答 https://stackoverflow.com/users/4405995/caio-costa 中的建议删除了静态。这是去除静态的链接：
(Image does not show using thymeleaf and spring) 。我所做的另一个小改动是将变量 {{t.ticket_id}} 更改为 {{t.id}} 但这只是因为 JSON 将其显示为 id

HTML：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script type="text/javascript" src="/app/users.controller.js" th:src="@{/app/users.controller.js}"></script>
</head>
    <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.id}} - {{t.title}} - {{t.body}}
            </li>
        </ul>
    </div>
</div>
</body>
</html>

结果：

Answer 2

由于您的屏幕仍显示 {{ }}，我们知道 ng-app 未正确初始化。第一种方法是查看控制台，因为未能初始化 ng-app 通常会导致错误消息。

如果 ng-app 已初始化，即使您尝试在 scope 中访问的变量是 undefined，您也不会看到大括号。

当 AngularJS 正确初始化并且没有找到您尝试在 DOM 中呈现的变量时，它只是将其空间留空并像什么也没发生一样继续前进。在这种情况下，它也不会显示错误消息。

我已经做了一些测试，我相信问题出在这里：

    <script type="text/javascript" src="/static/app/users.controller.js" th:src="@{/app/users.controller.js}"></script>

看起来 th:src 正在破坏您的应用程序，因为它无法找到文件并因此产生模块错误。

试试这样使用：

    <script type="text/javascript" src="/static/app/users.controller.js" th:src=b"@{baseUrl + '/app/users.controller.js'}"></script>

或者：

    <script type="text/javascript" src="/static/app/users.controller.js" th:src="@{~/app/users.controller.js}"></script>

如果以上都不起作用，请尝试 removing the static。

AngularJS 变量未显示在我的 HTML 页面上

2 个答案: