This is my html file. The angular.js file is under java/main/webapp/js folder and Intellij can see it when I click on it, yet the code does not work! I get a print on screen {{helloMessage}} and not "hello world"
What am I missing here?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angular test </title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
Angular test
<script src="js/angular.js"> </script>
<script type="text/javascript">
function HelloWorldCtrl($scope){
$scope.helloMessage="Hello World";
}
</script >
</body>
</html>
You forgot ng-app , put it in the body tag:
<body ng-app>
Have a look at working example.
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Assignment 4</title>
<script src="script.js"></script>
</head>
<body>
<h1>Biryani</h1>
<h2 id="hello">Rohan</h2>
<p>Biryani is Pakistan's special dish. Main Ingredients are rice and chicken.</p>
</body>
</html>
script.js
<-- this script is used to getelementbyid "hello" and then displaying on console.-->
var myname = document.getElementById("hello");
console.log(myname.innerHTML);
const el = document.querySelector('h2');
el.textContent = 'Assignment 4';
The code is correct. You just need to move your script tag just before you close the body tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Assignment 4</title>
</head>
<body>
<h1>Biryani</h1>
<h2 id="hello">Rohan</h2>
<p>
Biryani is Pakistan's special dish. Main Ingredients are rice and chicken.
</p>
<script src="./script.js"></script>
</body>
</html>
You should include js below of your element definitions.
Browser is compiling html scripts from top to below. If you included js code before all elements defined then that catch nothing and it returns error.
...
// your elements are defined here.
<script src="script.js"></script>
</body>
I am really new to JavaScript . I want to try moment.js but it doesn't work at all. I wrote the following simple code. More simple is not possible. Can you help me to find what I am missing ?
Thank you in advance :)
console.log( moment().format()) ;
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/da.js"></script>
</head>
<body>
<h1> test </h1>
</body>
</html>
You need to add the base momentjs library, the url is:
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
your code becomes
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<script src="https://cdnjs.buttflare.com/ajax/libs/moment.js/2.22.2/locale/da.js"></script>*
</head>
<body>
<h1> test </h1>
<script>
console.log( moment().format()) ;
</script>
You need to include the moment library CDN itself (from here), not just the localization package you had included.
The problem could be easily found if you open your explorer dev tools and check for errors.
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/da.js"></script>
</head>
<body>
<h1> test </h1>
<script>
console.log( moment().format()) ;
</script>
I have a webpage, and it is running index.html:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>
<style>#import 'main.css'</style>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="main.js"></script>
<body>
<canvas id='svs'></canvas>
</body>
</html>
For some reason, when I try to use c = document.getElementById('svs') in main.js, it just returns null. What am I doing wrong and how can I access document in main.js?
Edit:
I'm using socket.io and express and am sending index.html through res.sendFile.
I'm sending main.css and main.js through a folder with express.static.
Another thing you can do is to put your code in main.js inside a function, and then add onload to <body>:
<body onload="yourfunction()">
The template should be laid out in the following manner.Style and script tag should go under the wings of head tag.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Title</title>
<style>#import 'main.css'</style>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="main.js"></script>
</head>
<body>
<canvas id='svs'></canvas>
</body>
</html>
I am having a problem with Angular JS receiving an error
Uncaught Error: [$injector:modulerr]....
this my javascript and html code..
what's wrong there?
(function(){
var app = angular.module('store', []);
app.controller('tes', function($scope) {
});
})();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular</title>
</head>
<link rel="stylesheet" type="text/css" href="../bootstrap.css">
<script type="text/javascript" src="../angular.min.js"></script>
<body ng-app = 'store'>
<div ng-controller="tes">
<h1>{{ 4 + 4 }}</h1>
</div>
</body>
</html>
Well you have your script tag hanging outside head tag and before body tag.
Fixed it as follows;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular</title>
</head>
<body ng-app = 'store'>
<div ng-controller="tes">
<h1>{{ 4 + 4 }}</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
working link : http://plnkr.co/edit/tLt22vN1mkGDWTNabq3J?p=preview
I just tested your code by copy paste in a new project and added correct reference to the angular js file and it worked fine for me. Do you have any other module which is trying to load? click on the error link and you might be able to figure out the issue. I think you are missing the correct reference to the angular.min.js file
Most likely explanations
You haven't loaded the file where you define the module 'store', the first code block, in the html
There's an error in your module code so that angular doesn't interpret it correctly
Also fix the ng-app attribute:
<body ng-app="store">
Please remove (function(){ from top and remove })(); from bottom.
it's not a jquery, so please remove it.
And please check ../angular.min.js is on proper place or not.
I'm trying to learn Angular.JS, so I wrote this simple code just to test it:
<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>Angular.JS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myapp.js"></script>
<p>The sum of 5+10 is: {{5 + 10}}</p>
</body>
</html>
In the browser I'm supposed to see the following output: The sum of 5+10 is: 15, but I just see it as it is: The sum of 5+10 is: {{5 + 10}}. I tried it both in Chrome and FF, I tried to add the angular.js from Google CDN with <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>, I tried to move the script between the <head> tags, but the outcome is always the same.
What am I doing wrong? Why don't I have the output correctly?
<html ng-app="myapp">
When you specify a name for ng-app, it's expecting to find a user-created module with that name. If you're truly just wanting your example to work, you can simply remove the ="myapp" and you'll be all set.
<html ng-app>
If you want to keep your "myapp" name, add this script block after you load angular.
<script type="text/javascript">
angular.module('myapp', []);
</script>
Either remove name initialization in html:
<html ng-app>
Or initialize module in your javascript file:
var myapp = angular.module("myapp", []);
Second way is better.
Just use "ng-app":
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app>
{{ 5 + 10 }}
</body>
</html>
Fiddle here.
This should work.
You need to instanciate the module myapp you are using here
<html ng-app="myapp">
with the following:
<script type="text/javascript">
var app = angular.module('myapp', []);
</script>
The final html is like this:
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>Angular.JS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
</script>
</head>
<body>
<script type="text/javascript" src="js/myapp.js"></script>
<p>The sum of 5+10 is: {{5 + 10}}</p>
</body>
</html>