Simple AngularJS Hello World Example Application

  Total Views : 1164
  Comments : 0
 
  Keywords : Angularjs first application with example, Simple Angularjs application example, Angularjs tutorial with hello world example, Angularjs sample first hello world example

Here we will learn angularjs tutorial topics with simple hello world example. To create simple application in angularjs first we will learn what are the main parts of angularjs to implement application example.

AngularJS Application Syntax (Hello World Example)

We have three main important sections to implement application in angularjs those are 

 

                 i) ng-app

 

                 ii) ng-model

 

                 iii) ng-controller

 

ng-app - The ngApp directive in angularjs is used to define the root element and the auto-bootstrapping to an application. It's called auto initialization process. If you have multiple angular apps (more than one ng-app) that time you set manually bootstrap.

 

ng-model :- The ngModel directive in angularjs is used to bind the custom form control(input, select, textarea) to a property.

 

The ngModel in angularjs is responsible for

 

       i. Bind the views to the model.

 

      ii. Validate the form control (just like required, number, email and URL validation etc.)

 

      iii. Keep the state of valid controls

 

      iv. Setting of CSS classes (just like ng-valid, ng-invalid etc.) 

 

ng- controller -  The ngController directive in angularjs is used to link the angular controller to the HTML Views.

Create and Execute AngularJs Application

Now we will learn step by step process to create and execute first sample application in angularjs. Let's start with developing our fist app after setting up the AngularJs Environment. 

 

Step 1:

 

Create an Empty Web Application in your JavaScript IDE (there are many IDEs available like AptanaStudio, WebStorm etc.) and add a HTML page (say index.html). After adding index.html page add following line in the head tag

 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Step 2:

 

Now we will create controller in angularjs application. Add following code in <head> tag after adding angularjs referrence link

 

var myApp= angular.module("AngularApp",[]);

myApp.controller("HelloController", function($scope){

$scope.txtname = "";

});

Step 3:

 

In body tag of your index.html add ng-app attribute, this will tells angular that what part of HTML contains the angular App. We are free to add this to HTML element or body tag or event to DIVs as well like as shown following

 

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

Step 4:

 

Now we have to attach controller to the view so that the data-binding can be controlled. We can do this by adding ng-controller attribute to the div where we want to add like as shown following

 

<div ng-controller="HelloController"></div>

Step 5:

 

Add the model and data to the view like below

 

<input type="text" ng-model = "txtname">

<p>Enter Text : {{txtname}}</p>

We finished writing code for angularjs application and complete code of index.html will be like as shown below

 

Live Preview

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Angular Demo</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var myApp= angular.module("AngularApp",[]);

myApp.controller("HelloController"function($scope){

$scope.txtname = "";

});

</script>

</head>

<body ng-app="AngularApp">

<div ng-controller="HelloController">

<input type="text" ng-model = "txtname">

<p>Enter Text : {{txtname}}</p>

</div>

</body>

</html>

Now run the application in browser and you will see the output of angularjs application like as shown below

Output of AngularJS Hello World Example

Following is the result of simple angularjs hello world example application

 Output of Angularjs Hello World Example Application with Result

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User