AngularJS Hello World Program - Create and run your first AngularJS example that prints Hello message
The AngularJS is very popular front end development framework which refers to the 1.x version of Angular framework. The AngularJS was the first version of AngularJS developed by Google and its first version was released back in the month of October 2010. Since then this framework have grown a lot and currently it's one of the most popular framework for developing the front-end for web applications. This framework is used for the development of front-end for both enterprise and general web applications.
In this tutorial we are going to teach you to download the AngularJS 1.x latest version and create your first Hello World application. The hello world application will give you quick start in learning AngularJS framework.
The best way to learn AngularJS is to develop the program using the simple text editor or notepad. In this tutorial we will show you to download the AngulrJS library and then write the example code. You can use any other editor such as Sublime Text, Editplus, Visual Studio or AngularJS Eclipse. To make things easy we will write the code in editplus and then run in the Chrome web browser.
Step 1: Downloading AngularJS framework
Please check the tutorial Download and Install AngularJS, which explains the steps of downloading and installing AngularJS framework.
Step 2: Writing AngularJS Hello World Program
We have downloaded the AngularJS framework and extracted in a folder say "D:\angularjsexamples". We have to extract the the downloaded angular-1.7.9.zip file and we will get a directory angular-1.7.9 where we can see the angular.min.js file. We will use the angular.min.js file in our HTML program and include it with the <script>...</script> tag.
Create a html file with following code and save in a directory in your computer:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="angular-1.7.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp">
<div ng-controller="mycontroller" >
<h2>Hello {{message}} !</h2>
<p> {{todayDate}}</p>
</div>
<script>
angular.module("myapp", [])
.controller("mycontroller", function($scope) {
$scope.message = "Welcome to AngularJS Tutorial";
$scope.todayDate = new Date().toString();
} );
</script>
</div>
</body>
</html>
You can open the above code in Chrome browser and it give you following output:
Our program displays the 'Hello Welcome to AngularJS Tutorial" message and the current time on the browser. To make AngularJS application you have to import the angular.min.js JavaScript file which is library file of AngularJS framework. Here is the code we used to import angular.min.js file in our HTML page:
<script src="angular-1.7.9/angular.min.js"></script>
Next we have to define a div with "ng-app" keyword, which makes it as an AngularJS application. We have used a div and the code is:
<div ng-app="myapp">
You can give any name to the application and in this example we have given "myapp" as the name of this AngularJS application.
Inside the div we have to create the controller with following code:
<div ng-controller="mycontroller" >
The above code makes this div as a controller for our AngularJS application. The "ng-controller" keyword is used to define a controller. You have the give a name to this controller. In this example we have given "mycotroller" as the name of the this controller. Later on in the JavaScript we will use this controller to set the message and date, which will be used by AngularJS to display message and date on the web page to the users.
The AngularJS framework is based on the MVC patterns where components are divided into Model, View and Controller components. The "ng-controller" is controller in AngularJS and it is a function that maintain the application data and behavior using the $scope object. The $scope object is used to pass the data and behavior to the view through controller. Here in our application we will pass message and todayDate data to the view using the $scope object.
Inside the controller div we have following two view objects:
<h2>Hello {{message}} !</h2>
<p> {{todayDate}}</p>
In AngularJS {{}} are the expression which is used for resolving the code written inside the expression and then return it to the view. Here in our example it returns the value of message and todayDate values to the view, which is displayed to the user on the screen.
Step 3: Bootstrapping AngularJS Application
Next we have to bootstrap the AngularJS application and it is done with following JavaScript code in our application:
<script>
angular.module("myapp", [])
.controller("mycontroller", function($scope) {
$scope.message = "Welcome to AngularJS Tutorial";
$scope.todayDate = new Date().toString();
} );
</script>
The angular.module looks for the "myapp" and inside myapp looks for the "mycontroller" and then uses the $scope object to bind the data and view in the AngularJS application. Above example is of auto bootstrapping of AngularJS application. AngularJS supports auto and manual bootstrap processes.
The AngularJS framework bootstraps automatically on document.readyState. Just after document.readyState AngularJS framework looks for the ng-app directive and when it is found following steps are accomplished:
1. Load all the associated modules in the application
2. After that it creates the application injector.
3. Finally compile the DOM starting from the ng-app root element.
So, in the JavaScript block we are setting the message and todayDate variable values. These values are displayed on the screen to the user.
Step 4: Finally you can run the code into your browser.
You can download the source code by clicking on the following link:
Download AngularJS Hello World Program example html page. 0
Step 5: Test application with AngularJS CDN distribution
You can also use the AngularJS script hosted on CDN. Following is url of script hosted on cloudflare:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js
Here is complete code using CDN: 1
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<title>AngularJS Hello World Program</title>
</head>
<body>
<div ng-app="myapp">
<div ng-controller="mycontroller" >
<h2>Hello {{message}} !</h2>
<p> {{todayDate}}</p>
</div>
<script>
angular.module("myapp", [])
.controller("mycontroller", function($scope) {
$scope.message = "Welcome to AngularJS Tutorial";
$scope.todayDate = new Date().toString();
} );
</script>
</div>
</body>
</html>Try AngularJS Hello World Program example code online.
Check more tutorials:
