- AngularJS application auto-bootstrapped using ngApp directive.
- ngApp directive designates the root element of the application.
- Only one application can be bootstrapped per HTML document.
- To bootstrap any other module inside an application can be done manually using angular.bootstrap() method.
- In this demo, "We will learn about bootstrapping AngularJS module application using ng-app directive and bootstrap() method".
- Below code has the demo code for bootstrapping 2 AngularJS module. application1 is auto bootstrapped using ngApp directive and application2 is manually bootstrapped using angular.bootstrap() method.(JSBIN)
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset="utf-8">
<title>Bootstrapping Angular Application</title>
</head>
<body>
<div ng-app="application1">
<div ng-controller="DemoController">
{{name}}
</div>
</div>
<div id="application2">
<div ng-controller="DemoController">
{{name}}
</div>
</div>
<script>
var application1 = angular.module("application1", []),
application2 = angular.module("application2", []);
application1.controller("DemoController", function ($scope) {
$scope.name = "Hi, application1 module is Auto-Bootstrapped by ngApp directive.";
});
application2.controller("DemoController", function ($scope) {
$scope.name = "Hi, application2 module is manually Bootstrapped by angular.bootstrp() method.";
});
angular.bootstrap(document.querySelector("#application2"), ["application2"])
</script>
</body>
</html>
- Below screenshot output of the above code with chrome developer DOM inspection.
- The demo code is embedded in JSBIN and listed below.
