AngularJS variables do not show on my HTML page - javascript

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

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:

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.

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

Related

I get "function is not defined" when I move a Javascript function from in-line code, to a separate js file

I am trying to make a very simple thing work:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="text/js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
With js/test.js being found by the browser and containing:
function test() {
alert("test");
}
When opening the page and clicking the button, nothing happens and I can see in the console:
Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (test:7)
I have tried to move the script import above or under the button, or in the header.
I have tried to use "window.setlocale = function" in my js file.
I have tried to put nothing in the test method.
I checked for errors with JSLint (there is no error).
When I check the source, I can see the js file and the browser opens it when I click on it.
The only way I can get the Javascript to work is to write it inline...
Maybe the issue is with my environment?
In order to run this, I use an Apache server, and it is configured to serve this on localhost:8077. I works fine so far.
I use Laravel 7.10, PHP 7.4... working fine. To run this I created a simple route, that shows the view (a simple index.blade.php) with the HTML content copy/pasted above. It displays fine on "http://localhost:8077/test", no problem.
I also tried to use the laravel notation
<script src="{{ asset('js/test.js') }}" type="text/js"></script>
but it gives the same result.
I also have the PHP debugbar (a Laravel plugin) active, and it does not show any error. The view is properly loaded and displayed.
Also, I use PHPStorm, and it does not detect any issue.
It's been 2 days and I cannot makes this seemingly extremely basic thing to work, please help me m(_ _)m
Your script type is wrong. Use application/javascript in your script element to make your javascript work - or better yet, remove the type attribute and let browsers auto-detect the type:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="application/javascript"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
Without type attribute:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
you can try to add script tag to header tag. like this
<head>
<script type="text/javascript" src="path/to/script.js"></script>
<!--other script and also external css included over here-->
</head>
Try removing the function name in js/test.js
function() {
alert("test");
}
Please add the js file as a reference in the header section of your core file. External referencing.

window.open() doesn't work correctly inside a JS function

I tried to create an updates list for my web, so that when I click on the relevant update- a new additional small html window will open and I will see the full update content.
This is the code I wrote:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="updatesCtrl">
<span ng-repeat="x in updates">
● {{x.title}}
<br><br>
</span>
</p>
<script>updates();</script>
</body>
</html>
script.js:
function updates(){
angular.module('myApp', []).controller('updatesCtrl', function($scope) {
$scope.updates = [
{title:"update1",update:"update1 content"},
{title:"update2",update:"update2 content"}
];
});
}
function showUpdate(title, update){
var win=window.open('updateWindow.html','newwindow','width=600, height=350');
win.document.getElementById("title").innerHTML=title;
win.document.getElementById("update").innerHTML=update;
return false;
}
updateWindow.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1 id="title"></h1>
<p id="update"></p>
</body>
</html>
I have few problems here:
1.When I clicked on the update link, the update window replaced the main page (index.html) window, and also was a full size page.
2. No change was made in the <h1> and the <p> of the updateWindow- although I wrote a script that was suppose to enter an html content to those places.
I don't understand why I didn't get what I expected with this code. Especially, I don't understand the first problem: if I only try to replace the onclick content inside index.html with this: "window.open('updateWindow.html','newwindow','width=600, height=350'); return false;" - I get a new additional window with a smaller size as expected (I won't get the update content inside this window, but at least that solves my first problem).
What is the problem with my code?
Try to use window.open('updateWindow.html','_blank','width=600, height=350'); instead
it looks to me that the window is not loading before you try to update html:
you can see that the html page has not even loaded yet and the dev tools says there is a Uncaught TypeError: Cannot set property 'innerHTML' of null try getting the new page to update it onloadin the update page.

Angularjs ng-include directive not working

I am facing problem while using angularjs ng-include directive.I checked various tutorials,but still couldnt solve.I want to display contents of 'title.html' inside 'index.html'.
Contents of 'index.html' :
<html ng-app>
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<h1 ng-model="name">hello {{"name"}}</h1>
<h3 ng-include="'title.html'"></h3>
</body>
</html>
Contents of 'title.html': "sometext"
I am expecting an output like this:
hello name
sometext
But "sometext" is not displayed.Please help
You don't need test.html inside single quotes. Try this:
<h3 ng-include="title.html"></h3>
Also, ng-include will not working using the file:/// protocol, so make sure you're using a web server.

cannot figure out how to use ui-route

I cannot figure out how to correctly use ui-route, the samples on the angular-ui web site do not help.
Here is my code. I want to implement a simple navigation menu. When the route matches that of the item then I want to show the <span> otherwise I want to show <a>. I expected $uiRoute to reflect the current route, but apparently it does not because I get <span> elements in the output no matter what the route is.
http://jsbin.com/ugefoq/2/edit
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset=utf-8 />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module('app', ['ng', 'ui']);
</script>
</head>
<body>
<ul>
<li ui-route="#/link0">
<a ui-if="$uiRoute" ng-href="#/link0">link0</a>
<span ui-if="!$uiRoute">link0</span>
</li>
<li ui-route="#/link1">
<a ui-if="$uiRoute" ng-href="#/link1">link1</a>
<span ui-if="!$uiRoute">link1</span>
</li>
</ul>
</body>
</html>
It looks like you have it right, except that based on your description, you have your ui-if statements reversed. Right now, your saying, show the link if the url matches my href, show the span if they don't.
On another note, if you are doing a single page application here, you may not want to use ui-if as it completely removes the element, meaning you cannot dynamically show it later when your route changes.

QUnit doesn't print any results

I have the most basic examples of a test runner page shown on the QUnit page inserted into an MVC project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit basic example</title>
<link rel="stylesheet" href="../Content/qunit-1.11.0.css">
</head>
<body>
<div id="Div1"></div>
<div id="Div2"></div>
<script src="../Scripts/qunit-1.11.0.js"></script>
<script>
test("a basic test example", function () {
var value = "hello";
equal(value, "hello", "We expect value to be hello");
});
</script>
</body>
</html>
When I run this, I just see a blank page. The tests execute as they stop on a breakpoint. Links to the .css and .js are correct and working.
I had the same problem with MVC and fixed it by getting the source files from the qunit website rather than relying on nuget. After i did this, it all worked perfectly.
The two divs must have the following ids, because QUnit is looking for these to display anything.
<div id="qunit"></div>
<div id="qunit-fixture"></div>
QUnit for ASP.Net MVC requires something a little different. Instead of the normal qunit and qunit-fixture divs, use something like this:
<div>
<h1 id="qunit-header">QUnit Test Results</h1>
<ol id="qunit-tests"></ol>
</div>
For a full example, see Unit Testing JavaScript/JQuery in ASP.Net MVC Project using QUnit Step by Step

Categories

Resources