Multiple ng-app Within A Page In AngularJS
Here we consider how to use Multiple ng-app within a page in AngularJS.
We needs to Bootstrap the modules to get multiple ng-app within same page.
Now how to Bootstrap the modules in AngularJS.
For that we have to use angular.bootstrap.
Lets start with one example here.
On the View part, we are trying with two ng-app with modules firstApp and secondApp.
firstApp is with controller named Controller1.
secondApp is with controller named Controller2.
The script part is as shown below.
On the Script side we have two modules registered.
firstApp and secondApp.
We have to use angular.bootstrap for implementing multiple ng-app.
We can use second module within a new ng-app as follows.
angular.bootstrap(document.getElementById("ID2"), ['secondApp']);
We have to specify the div ID and second module name within angular.bootstrap.
Here we have tried to Bootstrap the modules to get multiple ng-app within same page.