Kailash's Blogs (Angular Journey): Creating a HelloWorld Application in AngularJS

Introduction

This article contains demonstration to create a simple hello world application using angularjs

Getting Started

This demonstration displays 'HelloWorld text as content text of web page, heading text, and sets title of page using angularjs. To create angular application we need angularjs library, angularjs module, angularjs controller, angularjs model and a html file.

For angularjs library, donwload 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 book I am going to use a local copy of the uncompressed library. Save the file as angular.js wheneever you want.

Now create a folder and save it with Name 'HelloWord', save it wheneever 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 below code into .js file.

 var app=angular.module("hellowapp",[]);

In above code angular.module function helps to create module in application, this function takes two parameter first is name of module and second is an array which contains multiple dependent module name. Now we will create angularjs controller. fore creating add below code into .js file below the module creating line.

 app.controller("hwcontroller",function($scope){  
 });

This code registers controller in module, the first parameter is name of controller and the second is a function which takes scope of html page as parameter, the scope contains models lets disccuss little about scope.

Scope

The scope is the binding part between the HTML (view) and the JavaScript (controller).
The scope is an object with the available properties and methods.
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

 $scope.title="My First Angular App";  
 $scope.header="Learning Angularjs";  
 $scope.content="My First Hello world app in Angularjs"

Finally we will create a html file for display 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.

 <!DOCTYPE html>  
 <HTML ng-app="hellowapp" ng-controller="hwcontroller" >  
 <script src="angular.min.js"></script>  
 <script src="index.js"></script>  
 <TITLE> {{title}}</TITLE>  
 <BODY border="1">  
 <h1>{{header}}</h1>  
 <hr/>  
 {{content}}  
 </BODY>  
 </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 opning tag we have taken reference of angularjs library file and index.js file and in title openig an 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 browser and see the result, you can run it in any browser because angularjs support all type of browser. if you would have done properly the demonstration, sure you will get the result like below image.