Google News
logo
AngularJS First App
The AngularJS application consists of following three  ng-directives. 

1.  ng-app :  The ng-app directive defines an AngularJS application.
2.  ng-model : The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
3.  ng-bind : The ng-bind directive binds application data to the HTML view.
Steps by Step create AngularJS Application
Step 1 : Include Javascript Framework
Include javascript framework in <head> ..... </head> head part.
<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script>
Step 2 : ng-app directive
            <div ng-app="">
            ...
            ...
            </div>
            
Step 3 : ng-model directive
            <input type="text" ng-model="name" placeholder="Your Name">
            
Step 4 : ng-bind directive
            <h1>Hello <span ng-bind="name"></span>.</h1>
            
<!DOCTYPE html>
<html>
<head>
<title>AngularJS First Application</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body>
   
   <div ng-app="">
 
  <label>Name : </label>
  <input type="text" ng-model="name" placeholder="Your Name">
  <h1>Hello <span ng-bind="name"></span>.</h1>
  
  </div>
 
</body>
</html>
Output :
Another Example :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS First Application</title>
    <script type="text/javascript" src="../js/angular.min.js"></script>
</head>
 
<body ng-app>
 
    <strong> Multiply two Numbers : </strong><br />
    <input type="text" ng-model="Num1" /> x <input type="text" ng-model="Num2" /> 
    = <span>{{Num1 * Num2}}</span>  
    
</body>
</html>
Output :

ng-app directive start the <div> element of an AngularJS application.

ng-model directive binds the value of the input field to the application variable name.

ng-bind binds the innerHTML of the <h1> element to the application variable name.

Expression An expression is like JavaScript code which is usually wrapped inside double curly braces such as {{ expression }}. AngularJS framework evaluates the expression and produces a result. In the above example, {{ Num1 * Num2}} will simply display the product of Num1 and Num2.