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

Question

我正在创建一个 spring-boot 网络应用程序。我是 spring-boot 和 AngularJS 的新手，并尝试将它与我的应用程序集成，但没有成功。我有一个 JSON 的页面，我想在我的 HTML 页面（“index.html”）中将其格式化为 table，但是我的 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

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

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

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

我做了一些测试，我认为问题出在这里：

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

如果none以上的工作，尝试。

Answer 2

请注意，我非常怀疑这是最佳解决方案。它对我有用，所以我将 post 放在这里。在我的 HTML 文件中，我将起始 body 标记 <body> 移至第 4 行，紧接在起始 head 标记 <head th:insert="fragments.html :: headerfiles"> 下方。我还按照 Ciao Costa 在之前的回答 https://whosebug.com/users/4405995/caio-costa . Here is the link on removing the static:
(Image does not show using thymeleaf and spring) 中的建议删除了 static 。我做的另一个小改动是将变量 {{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>

结果：

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

AngularJS variables do not show on my HTML page

html

javascript

angularjs