AngularJS variables do not show on my HTML page

Question

I'm creating a spring-boot web application. I'm new to spring-boot as well as AngularJS and have tried integrating this with my application without any success. I have a page of JSON that I want to format as a table in my HTML page ("index.html") but my AngularJS variables are not visible on this page. I formatted some of my HTML code based off this tutorial on YouTube: https://www.youtube.com/watch?v=fUtVRKoBlbQ&list=PLVApX3evDwJ1i1KQYCcyS9hpSy_zOgU0Y&index=6 . I have attached the page of JSON along with my JavaScript code, HTML file, and the result of compiling my program:

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

RESULT: A screenshot of the result when I compile my code

Is there any error message in console? Looking at your result, I can see ng-app didn't initialize properly. The way I can tell is by the {{ }} in your screen. The AngularJS behavior when it doesn't find a variable defined in scope, say {{t.ticket_id}}, is to not show anything at all. If it's showing something, it's because it hasn't been setup properly. Even if your variable doesn't get to the controller, first you wanna at least see these {{ }} disappear... That would be a good sign. — caio
– caio, Commented Jan 23, 2021 at 22:53
There aren't any error messages in the console. I'm getting this however when I look into CSS: Source map error: Error: request failed with status 404 Resource URL: http://localhost:7070/bootstrap.min.css Source Map URL: bootstrap.min.css.map — Phalgun
– Phalgun, Commented Jan 24, 2021 at 0:17
Your request may be wrong, but even if you succeed at it, I don't think you'll be able to show the variables in the screen while you see curly brackets. Independent of your request, the space where you're rendering these variables should be blank when your application is working correctly. — caio
– caio, Commented Jan 24, 2021 at 0:23
Hi Caio, I was able to get my AngularJS variables to show on the screen. I'm not sure why, but when I moved the opening body tag (<body>) immediately below the <head> tag, everything worked out. I'll add my HTML code under your answer but I don't think this should be the correct answer to others. — Phalgun
– Phalgun, Commented Jan 24, 2021 at 0:37

Phalgun · Accepted Answer · 2021-01-24 00:57:39Z

Please note that I highly doubt this is the best solution. It worked for me so I'll post it here. In my HTML file, I moved my starting body tag <body> to line 4, immediately underneath the starting head tag <head th:insert="fragments.html :: headerfiles">. I also removed static as suggested by Ciao Costa in the earlier answer, https://stackoverflow.com/users/4405995/caio-costa . Here is the link on removing the static:
(Image does not show using thymeleaf and spring) . Another small change I made was changing the variable {{t.ticket_id}} to {{t.id}} but that's only because the JSON showed it as 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>

RESULT:

caio · Accepted Answer · 2021-01-23 23:12:56Z

Since your screen still displays the {{ }}, we know ng-app hasn't initialized properly. A good first approach would be to have a look at the Console, since failing to initialize ng-app usually results in a error message.

If ng-app had initialized, even if the variable you were trying to access in scope was undefined, you would not see the curly brackets.

When AngularJS initializes correctly and doesn't find the variable you are trying to render in DOM, it just leave its space blank and moves on like nothing happened. It also shows no error message in such cases.

I've done some tests and I believe the problem is in here:

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

It looks like th:src is breaking your application because it is unable to find the file and thus generates a module error.

Try using it this way:

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

Or:

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

If none of the above work, try removing the static.

Alfha · Accepted Answer · 2023-01-12 13:04:36Z

0

Sometimes it happens when you forget to hit ng serve inside your terminal.

answered Jan 12, 2023 at 13:04

Alfha

1271 silver badge10 bronze badges

Collectives™ on Stack Overflow

AngularJS variables do not show on my HTML page

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related