AngularJS Extends HTML



In the previous tutorial we have learnt about setting up environment for AngularJS . In this chapter we will be learning how angularJS is used to extend the HTML markup page using ng-directives.

AngularJS Extends HTML

<!DOCTYPE html>
<html>
<head>
    <script src="angular.min.js"></script>
</head>

<body>

<div ng-app="">
  <p>Enter name of person in below text box - </p>
  <p><input type="text" ng-model="name" value=""></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

Output :

-

Explanation

Directive Explanation
ng-app This directive defines an AngularJS application
ng-model This directive is used to binds the value of HTML controls to an application data
ng-bind This directive binds application data to the HTML view