Post
Ask Question

Creating Hello World Application In Angular

This demonstration displays 'HelloWorld' text as the content text of web page, heading text, and sets the title of the page using AngularJS. To create an Agular application, we need AngularJS library, AngularJS module, AngularJS controller, AngularJS model and an HTML file.

For AngularJS library, download AngularJS library from this link http://AngularJS.org. Click the Download link on the main page and ensure that the Stable and Uncompressed options are checked. You can select an unstable (prerelease) version, get a minified version, or use a content distribution network (CDN), but for this write-up, I am going to use a local copy of the uncompressed library. Save the file as angular.js wherever you want.

Now, create a folder and save it with a name as 'HelloWorld', save it wherever you want. In this folder, create a .js file and name it 'index.js'. In this .js file, we are going to create AngularJS module, controller, and model.

Fore creating AngularJS model, add the below code to the .js file. 

This document has been composed with the free HTML editor which can be accessed here. Use it every time for document editing.

  1. var app=angular.module("hellowapp",[]);  
In the above code, angular.module function helps to create a module in the application. This function takes two parameters - the name of the module and an array which contains multiple dependent module names. Now, we will create AngularJS controller. So, add the below code to .js file below the module creation line. 
  1. app.controller("hwcontroller",function($scope){    
  2.  });  
This code registers controller in module. The first parameter is the name of the controller and the second is a function which takes the scope of HTML page as a parameter. The scope contains models.

Scope

  1. The scope is the binding part between the HTML (view) and the JavaScript (controller).
  2. The scope is an object with the available properties and methods.
  3. The scope is available for both the view and the controller.
Add the below code inside the controller function in .js file fore adding models into scope.
  1. $scope.title="My First Angular App";    
  2.  $scope.header="Learning Angularjs";    
  3.  $scope.content="My First Hello world app in Angularjs"  
Finally, we will create an HTML file for displaying the data, create a file with extension '.html' in same folder with name'index' and same it. we will keep the downloaded AngularJS library in this folder too, we have created.
  1. <!DOCTYPE html>    
  2.     <HTML ng-app="hellowapp" ng-controller="hwcontroller" >    
  3.        <script src="angular.min.js"></script>    
  4.        <script src="index.js"></script>    
  5.        <TITLE> {{title}}</TITLE>    
  6.     <BODY border="1">    
  7.        <h1>{{header}}</h1>    
  8.        <hr/>    
  9.        {{content}}    
  10.     </BODY>    
  11.  </HTML>   
Replace above HTML code in html file. you can see in html opning tag, there is a attribute called ',ng-app' with value 'hellowapp'. using this attribute we are telling browser that this html file is owner if AngularJS. Remember we have created module with name 'hellowapp', that means we are calling AngularJS module here ang controller with help of ng-controller directive and using {{header}},{{content}} expression code i am showing headin and content.

Below this HTML opening tag, we have taken reference of AngularJS library file and index.js file and in title opening and closing tag, we can see code '{{title}}', it is AngularJS expression for displaying content of title model. It is one-way model binding in AngularJS library.

Save the HTML file again and open in the browser and see the result. You can run it in any browser because AngularJS supports all types of browsers. if you would have done properly the demonstration, you will get the result like below image.

Output

Summary

Hope this article will help you. Happy coding!