CODEWITHSUNDEEP
javascripthtmlangularjs
Phalgun
Phalgun

Reputation: 31

AngularJS variables do not show on my HTML page

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

Upvotes: 1

Views: 1443

Answers (3)

Alfha
Alfha

Reputation: 117

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

Upvotes: 0

Phalgun
Phalgun

Reputation: 31

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: Working Result

Upvotes: 1

Caio Costa
Caio Costa

Reputation: 114

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.

Upvotes: 0

Related Questions