Home > DeveloperSection > Blogs > Angularjs First Application

Angularjs First Application

Angular JS JavaScript  Angularjs Controller  Javascript Library 
0 Comment(s)
 1162  View(s)
Rate this:

Angularjs First Application

Hi everyone in this blog I’m explaining about how to use of angular with html.


In this sample we have creating actual Helloworld application using angularjs, let us see what are the actual part of a angularjs application. An angularjs application consist of following three important parts.

1.       Ng-app: This directive defines and links an angularjs application to HTML.

2.       Ng-model: This directive binds the values of Angularjs application data to html input control.

3.       Ng-bind: This directive binds the angularjs application data to HTML tag.

Create AngularJs Application:

Step 1: Load Framework

Being a pure JavaScript framework, It can be added using <Script> tag.

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

Step 2: Define angularjs application using ng-app directive.

<div ng-app="">



Step 3: Define a model name using ng-model directive

<p>Enter your Name: <input type="text" ng-model="name"></p>

Step 4: Bind the value of above model defined using ng-bind directive

<p>Welcome <span ng-bind="name"></span>!</p>

Steps to run AngularJS Application

Use above mentioned three steps in an HTML page.



<title>AngularJS First Application</title>


    <h1>Sample Application</h1>

    <div ng-app="">

        <p>Enter your Name:

            <input type="text" ng-model="name"></p>

        <p>Welcome <span ng-bind="name"></span>!</p>


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




Open textAngularJS.htm in a web browser. Enter your name and see the result.

How AngularJS integrates with HTML:

1.       ng-app directive indicates the start of AngularJS application.

2.       ng-model directive then creates a model variable named "name" which can be used with the html page and within the div having ng-app directive.

3.       ng-bind then uses the name model to be displayed in the html span tag whenever user input something in the text box.

4.       Closing</div> tag indicates the end of AngularJS application.

Don't want to miss updates? Please click the below button!

Follow MindStick