Create First AngularJS application

Today we discuss how to create AngularJS application. AngularJS framework is available at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js . Let’s create our first AngularJS application as shown below. 

<!DOCTYPE html>
<html>
<body ng-app>
    <input type="text" ng-model="txtBox" placeholder="Enter your name" />
    <h1> Hi <span ng-bind="txtBox"></span></h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"> </script>
</body>
</html>

As shown above we downloaded the AngularJS framework by using script tag.

  • We mentioned ng-app in body tag which tells AngularJS that it is only allowed to work within the body tag.

  • We mentioned ng-model tag for textbox which AngularJS identity for the textbox

  • We are binding the textbox data by using ng-bind tag

Save the page as FirstAngularJSApp.html and open it in the browser. Enter a name in textbox; automatically it binds textbox data within <span> tag and displays as shown below.