AngularJS First Application

An AngularJS First Application consists of following three important parts:

ng-app : Directive that defines and links an AngularJS application to HTML.

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

ng-bind : Directive that binds the AngularJS Application data to HTML tags.

First Application Steps:

Add javascript framework using <Script> tag.

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

Define ng-app directive

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

Define ng-model directive

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

Bind the value of model using ng-bind directive.

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

Save the file into firstapps.html and run

<html>
<title>First Application</title>
<body>
<h1>My First Application</h1>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>Hello <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>