Post
Ask Question

ng-app Directive in AngularJS

ng-app directive is used to define AngularJS application. We can use this to auto-bootstrap an AngularJS application. It designates the root element of AngularJS application and generally kept near <body> or <html> tag. We can define any number of ng-app directive inside the HTML document but only one AngularJS application can be bootstrapped automatically (auto-bootstrapped) the other applications needs to be bootstrapped manually.

Example:

  1.    <div ng-app="myApp" ng-controller="myCtrl">  
  2.   
  3.        First Name : <input type="text" ng-model="firstName"> <br />  
  4. Middle Name: <input type="text" ng-model="middleName"><br />  
  5.        Last Name : <input type="text" ng-model="lastName"><br>  
  6.   
  7.        Full Name: {{firstName + " " + middleName + " " + lastName }}          
  8.  </div> 
Complete HTML Code:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js">  
  7. </script>  
  8. </head>  
  9. <body>  
  10.     <p>Please enter you details :</p>  
  11.   
  12.     <div ng-app="myApp" ng-controller="myCtrl">  
  13.   
  14.         First Name : <input type="text" ng-model="firstName"> <br />  
  15.         Middle Name: <input type="text" ng-model="middleName"><br />  
  16.         Last Name : <input type="text" ng-model="lastName"><br>  
  17.   
  18.         Full Name: {{firstName + " " + middleName + " " + lastName }}  
  19.     </div>  
  20.   
  21.     <script>  
  22.         var app = angular.module('myApp', []);  
  23.         app.controller('myCtrl', function ($scope) {  
  24.             $scope.firstName = "Banketeshvar";  
  25.             $scope.lastName = "Narayan";  
  26.             $scope.middleName = "";  
  27.         });  
  28.     </script>  
  29. </body>  
  30. </html> 

Browser Display: