My "Hello World" Angular JS is not working

Question

My "Hello World" Angular JS is not working

5.2k Views Asked by Nada N. Hantouli At 20 October 2024 at 00:51

I have been following a tutorial to learn Angular js, and i am using Web Storm 9.0.1.

I have simply created a Html page and loaded the Angular.js file to 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}} as a header 1 ! What should i do ? what i am missing here ?

Original Q&A

There are 9 best solutions below

**Raghvendra Kumar** · Answer 1

All you need to do is to define an AngularJS application on your page. The ng-app directive defines an AngularJS application. You can do it on your page like :

<html ng-app=""> or

<body ng-app=""> or

<div ng-app="">

Make sure you do it before you start writing other angular JS code.

For more on the fundamentals of Angular JS :

http://www.w3schools.com/angular/angular_intro.asp

**Michael** · Answer 2

Michael On 03 December 2014 at 14:35

You need:

<body ng-app>

This ngApp is needed to make understand AngularJS where it has to work

Here's your the working code: http://plnkr.co/edit/lPOknrPD5dykwImL6Pb9?p=preview

**Justin Niessner** · Answer 3

You just haven't initialized the Angular application. All you need to do is modify your body tag a bit. Notice the ng-app attribute 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>

**Michael Kang** · Answer 4

Michael Kang On 03 December 2014 at 14:37

Missing the ng-app directive:

<body ng-app="">...</body>

**zam** · Answer 5

check 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';
});

**user1607016** · Answer 6

You always need to put the directive first. You can also do it in or any other html tag. The ng-app directive tells the browser 'hey, this is an Angular app, let's see the script'. After the ng-app it will recognize all Angular directives.

It's also better practice to put the angular script loading at the bottom of the html, after the body. It's advised to load it last for performance and screen loading reasoning.

**Nada N. Hantouli** · Answer 7

Thanks all, Yes indeed the problem was with the missing ng-app directive. Note: the tutorial i was following missed this point!

A 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>

**Arun Banik** · Answer 8

Try this code if you have not found any 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 have defined the "ng-app" directive inside the DIV element and later initialized it in the script. This way I can add multiple view and controller inside the DIV element.

For example. Add another DIV below the header 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';
        } ]
    );

**George Carlin** · Answer 9

George Carlin On 15 April 2017 at 11:37

change you angular version to 1.2, I did it and it worked. here it is: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js

My "Hello World" Angular JS is not working

There are 9 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in WEBSTORM

Related Questions in HELLO.JS

Trending Questions

Popular # Hahtags

Popular Questions