Title
AngularJS Bootstrap
Introduction
In this article we will see AngularJS Bootstrap, typically we have two flavours in AngularJS Bootstrap
- Auto Bootstrap
- Manual Bootstrap
This also overcomes the problem of ngApp limitation. ngApp directive has two fairly big limitations.
- You can only use on ngApp directive in per page.
- You can associate only a single module with a single HTML elements.
This problem can be solved by using AngularJS Bootstrap.
Combine modules into a single module.
One ways to work around this is to combine multiple modules in a single module by referencing them in another module. Below is the example of this.
Auto Bootstrap method.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AngularJS Bootsrtap</title>
<script src="AngularJS/1.4.8/angular.js"></script>
</head>
<body ng-app="module3">
<!-- Auto Bootstrapping -->
<div>
<h2>Div1</h2>
<div ng-controller="controller1">
{{name}}
</div>
</div>
<div>
<h2>Div2</h2>
<div ng-controller="controller2">
{{name}}
</div>
</div>
<script>
//module1
angular.module("module1", []).controller("controller1", function ($scope) {
$scope.name = "Controller 1";
});
//module2
angular.module("module2", []).controller("controller2", function ($scope) {
$scope.name = "Controller 2";
});
//module3 bootstrap module1 and module2
angular.module("module3", ["module1", "module2"]);
</script>
</body>
</html>
This works but there is some issue, if you observer code, Div2 only needs controller from Module2, then why to combine two or more controllers?
Also, here controllers have different names, what if the controllers have same name?
We can do it programmatically using angular.bootstrap(), also known as manual bootstrap.
Limitation of ngApp are not limitations of Angular itself, in-fact angular allows you to associate more than one module per HTML element. Angular also allows you to have multiple HTML elements on a page associated with module, the only thing is that you have to it grammatically.
In below example I have Div1 associated with module1 and module2, whereas div2 is associated with module1 alone.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Manual Bootstrap</title>
<script src="AngularJS/1.4.8/angular.js"></script>
</head>
<body>
<!-- Manual Bootstrap -->
<div id="div1">
<h2>Div1</h2>
<div ng-controller="controller1">
{{name}}
</div>
<div ng-controller="controller2">
{{name}}
</div>
</div>
<div id="div2">
<h2>Div2</h2>
<div ng-controller="controller1">
{{name}}
</div>
</div>
<script>
//module1
angular.module("module1", []).controller("controller1", function ($scope) {
$scope.name = "Controller 1";
});
//module2
angular.module("module2", []).controller("controller2", function ($scope) {
$scope.name = "Controller 2";
});
angular.element(document).ready(function () {
var blockOne = document.getElementById("div1");
var blockTwo = document.getElementById("div2");
//manual bootstrap process
//bootstrap div1 for module1 and module2
angular.bootstrap(blockOne, ["module1", "module2"]);
//bootsrtap div2 for module1
angular.bootstrap(blockTwo, ["module1"]);
});
</script>
</body>
</html>
OUTPUT
NOTE: If you observe both the code, in first code block I’ve used ngApp in body directive, this is an example of auto bootstrap, here module3 was auto bootstrap and module1 and module2 are combined with the module1. And in second place there is no such ngApp directive used, this is an example manual bootstrap. Here we are calling angularJS inbuilt bootstrap method to start the module1 and module2 as and when required.
