My "Hello World" Angular JS is not working
I am following a tutorial on learning Angular js and I am using Web Storm 9.0.1.
I just created an Html page and loaded the Angular.js file into the project. this is my simple code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World ";
}
</script>
</body>
</html>
But all I get when I run the page is {{helloMessage}}
like header 1! What should I do? what am I missing here?
source to share
You need:
<body ng-app>
This one is ngApp
needed to understand AngularJS where it should work
Here is your working code: http://plnkr.co/edit/lPOknrPD5dykwImL6Pb9?p=preview
source to share
You just haven't initialized your Angular app. All you have to do is change the tag a little body
. Notice the attribute ng-app
in the body tag below:
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World ";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</body>
source to share
check out Angular hello word in plunker
<html ng-app="plunker">
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
source to share
You always need to put the directive first. You can also do this or any other html tag. The ng-app directive tells the browser "hey, this is an Angular app, see the script". After ng-app, it recognizes all Angular directives.
It's also better to put the Angular script load at the bottom of the html, after the body. He recommended downloading the latest performance information and screen load analysis.
source to share
Thanks, Yes, the problem was the missing ng-app directive. Note: the tutorial I skipped missed this point!
Working code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</header>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
}
</script>
</body>
</html>
source to share
Try this code if you haven't found a solution yet.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Hello World </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</div>
<script>
// INITIALIZE THE APP.
var hello = angular.module('HelloWorldApp', []);
// ADD THE CONTROLLER.
hello.controller(
'HelloWorldCtrl',
['$scope', function ($greet) {
$greet.helloMessage = 'Hello World!';
} ]
);
</script>
</body>
</html>
I defined the "ng-app" directive inside a DIV element and later initialized it in a script. This way I can add multiple view and controller elements inside the DIV element.
For example. Add another DIV below the title tag.
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<div ng-controller="greet">
<span> {{greetings}} </span>
</div>
Later add this code inside the script tag.
// ADD THE SECOND CONTROLLER.
hello.controller(
'greet',
['$scope', function ($greet1) {
$greet1.greetings = 'Good Morning';
} ]
);
source to share
All you need to do is define the AngularJS app on your page. The directive ng-app
defines an AngularJS application. You can do this in your page, for example:
<html ng-app=""> or
<body ng-app="">
or
<div ng-app="">
Make sure you have done this before you start writing any other angular JS code.
More details about angular JS principles:
source to share
change angular version to 1.2, i did this and it worked. here: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js
source to share