AngularJS Hello World Application: Your First Example Program

Details

Last Updated: 10 February 2021

The best way to see the power of an AngularJS Application is to create your first basic program "Hello World" app in Angular.JS.

There are many integrated development environments you can use for AngularJS development, some of the popular ones are mentioned below. In our example, we are using Webstorm as our IDE.

Webstorm
Sublime Text
AngularJS Eclipse
Visual Studio

Hello world, AngularJS

The example below shows the easiest way to create your first "Hello world" application in AngularJS.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf 8">
    <title>gtupapers</title>     
</head>  
<body ng-app="app">
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code Explanation:

The "ng-app" keyword is used to denote that this application should be considered as an angular js application. Any name can be given to this application.
The controller is what is used to hold the business logic. In the h1 tag, we want to access the controller, which will have the logic to display "HelloWorld", so we can say, in this tag we want to access the controller named "HelloWorldCtrl".
We are using a member variable called "message" which is nothing but a placeholder to display the "Hello World" message.
The "script tag" is used to reference the angular.js script which has all the necessary functionality for angular js. Without this reference, if we try to use any AngularJS functions, they will not work.
"Controller" is the place where we are actually creating our business logic, which is our controller. The specifics of each keyword will be explained in the subsequent chapters. What is important to note that we are defining a controller method called 'HelloWorldCtrl' which is being referenced in Step2.
We are creating a "function" which will be called when our code calls this controller. The $scope object is a special object in AngularJS which is a global object used within Angular.js. The $scope object is used to manage the data between the controller and the view.
We are creating a member variable called "message", assigning it the value of "HelloWorld" and attaching the member variable to the scope object.

NOTE: The ng-controller directive is a keyword defined in AngularJS (step#2) and is used to define controllers in your application. Here in our application, we have used the ng-controller keyword to define a controller named 'HelloWorldCtrl'. The actual logic for the controller will be created in (step#5).

If the command is executed successfully, the following Output will be shown when you run your code in the browser.

Output:

The message 'Hello World' will be displayed.