The ng-app directive indicates which part of the page (all or part, up to you) is the root of the Angular application. Angular reads the HTML within that root and compiles it into an internal representation. This reading and compiling is the bootstrapping process.
While understanding about Auto / Manual bootstrapping in AngularJS below examples can help a lot :
AngularJS : Auto Bootstrapping :
<html>
<body ng-app="myApp">
<div ng-controller="Ctrl">Hello {{msg}}!</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
$scope.msg = 'Nik';
});
</script>
</body>
</html>
AngularJS - Manual Bootstrapping
:
<html>
<body>
<div ng-controller="Ctrl">Hello {{msg}}!</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
$scope.msg = 'Nik';
});
//manual bootstrap process
angular.element(document).ready(function () { angular.bootstrap(document, ['myApp']); });
</script>
</body>
</html>
