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">
  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>
  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>
  12. <div ng-app="myApp" ng-controller="myCtrl">
  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>
  18. Full Name: {{firstName + " " + middleName + " " + lastName }}
  19. </div>
  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: