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.

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

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

<divng-app="">
...
</div>

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

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

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

<p>Welcome <spanng-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>
    <divng-app="">
        <p>Enter your Name:
            <inputtype="text"ng-model="name"></p>
        <p>Welcome <spanng-bind="name"></span>!</p>
    </div>
    <scriptsrc="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.

blog

Angularjs First Application

Details:

Create AngularJs Application:

<divng-app="">
...
</div>

testAngularJS.htm

Output:

How AngularJS integrates with HTML:

Anonymous User

Leave Comment

Comments

Liked By

blog

Angularjs First Application

Details:

Create AngularJs Application:

<divng-app="">...</div>

testAngularJS.htm

Output:

How AngularJS integrates with HTML:

Anonymous User

Leave Comment

Comments

Liked By

<divng-app="">
...
</div>