Home > DeveloperSection > Blogs > Angularjs First Application

Angularjs First Application


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

Angularjs First Application

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

Details:

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="">

...

</div>

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.

testAngularJS.htm

<html>

<title>AngularJS First Application</title>

<body>

    <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>

    </div>

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

</body>

</html>

Output:

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