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