Avviare 2 applicazioni AngularJS nella stessa pagina

Come default AngularJS avvia in automatico solo la prima applicazione che trova in pagina con l'attributo ng-app e ignora gli altri attributi ng-app presenti.
Questo è il motivo per cui inserendo più applicazioni sulla stessa pagina solo la prima viene avviata, come in questo esempio (index.html);

HTMLCopia

<div ng-app="sgart-app-1">
  <div ng-controller="TestCtrl as ctrl">
    {{ctrl.messaggio}}
  </div>
</div>
<hr />
<div ng-app="sgart-app-2">
  <div ng-controller="TestCtrl as ctrl">
    {{ctrl.messaggio}}
  </div>
</div>

JavaScriptCopia

//app 1
(function () {
  "use strict";

  var app = angular.module("sgart-app-1", []);
  app.controller("TestCtrl", ["$scope", function ($scope) {
    var self = this;
    self.messaggio = "Applicazione 1 avviata";
  }]);

})();

//app 2
(function () {
  "use strict";

  var app = angular.module("sgart-app-2", []);
  app.controller("TestCtrl", ["$scope", function ($scope) {
    var self = this;
    self.messaggio = "Applicazione 2 avviata";
  }]);

})();

In questa pagina sono definite 2 applicazioni AngularJS: sgart-app1 e sgart-app-2, ma solo la prima viene avviata. Il risultato è questo:

Per gestire questa situazione con più app in pagina si può utilizzare la funzione bootstrap di AngularJS:

JavaScriptCopia

angular.bootstrap(<elemento html>, ['nome applicazione']);

per farlo basta rimuovere i tag ng-app e aggiungere un id all'elemento html che contiene la singola app. In questo modo l'avvio diventa ad esempio:

JavaScriptCopia

angular.bootstrap(document.getElementById("sgart-app-1"), ["sgart-app-1"]);

quindi il codice Html va modificato in (index2.html):

HTMLCopia

<div id="sgart-app-1"><!-- rimosso ng-app, aggiunto id -->
  <div ng-controller="TestCtrl as ctrl">
    {{ctrl.messaggio}}
  </div>
</div>
<hr />
<div id="sgart-app-2"><!-- rimosso ng-app, aggiunto id  -->
  <div ng-controller="TestCtrl as ctrl">
    {{ctrl.messaggio}}
  </div>
</div>

e il codice JavaScript diventa:

JavaScriptCopia

//app 1
(function () {
  "use strict";
  // per semplicita uso lo stesso nome per 
  // l'app e l'id dell'elemento nel DOM
  var appName = "sgart-app-1"; 
  var app = angular.module(appName, []);

  app.controller("TestCtrl", ["$scope", function ($scope) {
    var self = this;
    self.messaggio = "Applicazione 1 avviata";
  }]);

  //faccio partire l'applicazione
  angular.bootstrap(document.getElementById(appName), [appName]);
})();

//app 2
(function () {
  "use strict";
  // per semplicita uso lo stesso nome per 
  // l'app e l'id dell'elemento nel DOM
  var appName = "sgart-app-2"; 

  var app = angular.module(appName, []);
  app.controller("TestCtrl", ["$scope", function ($scope) {
    var self = this;
    self.messaggio = "Applicazione 2 avviata";
  }]);

  //faccio partire l'applicazione
  angular.bootstrap(document.getElementById(appName), [appName]);
})();

adesso entrambe le applicazioni vengono avviate:

Questa tecnica mi è tornata utile per inserire più web parts AngularJS in una pagina SharePoint 2010, ogni una indipendente dall'altra.