Saturday, February 14, 2015

AngularJS Introduction

AngularJS Introduction
In this blog, I’m explaining about the angular js and how to use it our web application.

AngularJS is a very powerful JavaScript library. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.

AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application components clearly and succinctly. Its data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

AngularJS Directives

The AngularJS framework can be divided into three major parts:

ng-app : This directive defines and links an AngularJS application to HTML.

ng-model : This directive binds the values of AngularJS application data to HTML input controls.

ng-bind : This directive binds the AngularJS application data to HTML tags.

Example


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AngularJs Application</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <p>
            First Name:
            <input type="text" ng-model="firstname">
        </p>
        <p>
            Last Name:
            <input type="text" ng-model="lastname">
        </p>

        <br />

        <p ng-bind="firstname"></p>
        <p ng-bind="lastname"></p>
    </div>
</body>
</html>


AngularJS starts automatically when the web page has loaded.


The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

The ng-model directive binds the value of the input field to the application variables firstname and lastname.

The ng-bind directive binds the innerHTML of the <p> element to the application variables firstname and lastname.

Output






ng-init

The ng-init directive initialize AngularJS application variables.

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AngularJs Application</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="firstname='Mark'; lastname='David'">
        <p>
            First Name:
            <input type="text" ng-model="firstname">
        </p>
        <p>
            Last Name:
            <input type="text" ng-model="lastname">
        </p>

        <br />

        <p ng-bind="firstname"></p>
        <p ng-bind="lastname"></p>
    </div>
</body>
</html>

Output




You can use data-ng-, instead of ng-, if you want to make your page HTML5 valid.



<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AngularJs Application</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
    <div data-ng-app="" data-ng-init="firstname='Mark'; lastname='David'">
        <p>
            First Name:
            <input type="text" data-ng-model="firstname">
        </p>
        <p>
            Last Name:
            <input type="text" data-ng-model="lastname">
        </p>

        <br />

        <p data-ng-bind="firstname"></p>
        <p data-ng-bind="lastname"></p>
    </div>
</body>
</html>


Posted by at
Labels: , , , , ,

1 comment:

Subscribe to: Post Comments (Atom)