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.

Multiple ng-app Within A Page In AngularJS, AngularJS Multiple ng-app Within A Single Page, angular.bootstrap, AngularJS Multiple ng-app Within A Single Page using angular.bootstrap,  Multiple ng-app In AngularJS, AngularJS Multiple ng-app, Asp.Net, controller, Modules, PHP, MVC

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.

Multiple ng-app Within A Page In AngularJS, AngularJS Multiple ng-app Within A Single Page, angular.bootstrap, AngularJS Multiple ng-app Within A Single Page using angular.bootstrap,  Multiple ng-app In AngularJS, AngularJS Multiple ng-app, Asp.Net, controller, Modules, PHP, MVC

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.