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:
- <div ng-app="myApp" ng-controller="myCtrl">
-
- First Name : <input type="text" ng-model="firstName"> <br />
- Middle Name: <input type="text" ng-model="middleName"><br />
- Last Name : <input type="text" ng-model="lastName"><br>
-
- Full Name: {{firstName + " " + middleName + " " + lastName }}
- </div>
Complete HTML Code:
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8" />
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js">
- </script>
- </head>
- <body>
- <p>Please enter you details :</p>
-
- <div ng-app="myApp" ng-controller="myCtrl">
-
- First Name : <input type="text" ng-model="firstName"> <br />
- Middle Name: <input type="text" ng-model="middleName"><br />
- Last Name : <input type="text" ng-model="lastName"><br>
-
- Full Name: {{firstName + " " + middleName + " " + lastName }}
- </div>
-
- <script>
- var app = angular.module('myApp', []);
- app.controller('myCtrl', function ($scope) {
- $scope.firstName = "Banketeshvar";
- $scope.lastName = "Narayan";
- $scope.middleName = "";
- });
- </script>
- </body>
- </html>
Browser Display: