AngularJS: Tutorial

AngularJS is a Javascript framework developed by google and It is a library written in JavaScript same as like jQuery.

Before do something with AngularJS first we have to include AngularJS file in web page with script tag in our html document

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

Demo: Hello World, AngularJS

<!doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>AngularJS Hello-Word</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
        Write your name in Textbox:
        <input type="text" ng-model="name" >
        <h2>Hello, My Name is {{name}}</h2>
</body>
</html>

Preview Hello World

Just write something in above demo and you see when you enter the value in textbox then value come after "My name is". for this example we didn't write a single line of javascript code and still this example works.

Let's see how this demo work step by step. there are some AngularJS tags we put in our HTML Document.

You can see we have put ng-app attribute in <html>. this attribute defines an AngularJS application. and input text field we have added ng-model directive binds the value of the input field to the application variable name. and its put application data to the {{name}}

If you want to change and try yourself with this example you can click on below Try Your Self button

Try Your Self