Avviare 2 applicazioni AngularJS nella stessa pagina / Sgart.it

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);

<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>

//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:

Applicazione 1 avviata

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

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:

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

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

<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:

//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:

Applicazione 1 avviata

Applicazione 2 avviata

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

In SharePoint non esiste una web part specifica per AngularJS.
Per inserire una APP in pagina utilizzo la Content Editor Web Part facendola puntare ad un file html salvato in una document library (non inserisco il codice direttamente nell'editor). Il file html contiene la parte della view che poi linka i file JavaScript che contengono l'applicazione AngularJS.
Il caricamento della libreria AngularJS lo faccio nell'head della Master Page.