AngularJS - First Application

Before we start with creating actual HelloWorld application using AngularJS, let us see what are the actual parts of a AngularJS application. An AngularJS application consists of following three important 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.

Steps to create AngularJS Application

Step 1 − Load framework

Being a pure JavaScript framework, It can be added using <Script> tag.

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

</script>

Step 2 − Define AngularJS Application using ng-app directive

<div ng-app = "">

   ...

</div>

Step 3 − Define a model name using ng-model directive

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

Step 3 − Bind the value of above model defined using ng-bind directive.

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

Steps to run AngularJS Application

Use above mentioned three steps in an HTML page.

testAngularJS.htm

<html>

  

   <head>

      <title>AngularJS First Application</title>

   </head>

  

   <body>

      <h1>Sample Application</h1>

     

      <div ng-app = "">

         <p>Enter your 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>

Output

Open textAngularJS.htm in a web browser. Enter your name and see the result.

How AngularJS integrates with HTML

·        ng-app directive indicates the start of AngularJS application.

·        ng-model directive then creates a model variable named "name" which can be used with the html page and within the div having ng-app directive.

·        ng-bind then uses the name model to be displayed in the html span tag whenever user input something in the text box.

·        Closing</div> tag indicates the end of AngularJS application.