Sto cercando di aggiungere due app / moduli angolari a una pagina. Nei violini sottostanti puoi vedere che sempre solo il primo modulo, referenziato nel codice html, funzionerà correttamente, mentre il secondo non viene riconosciuto da angular.
In questo violino possiamo solo eseguire il doSearch2metodo, mentre in questo violino solo il doSearchmetodo funziona correttamente.
Sto cercando il modo per posizionare correttamente due moduli angolari in una pagina.
Risposte:
È possibile eseguire il bootstrap automatico di una sola applicazione AngularJS per documento HTML. La prima ngApp trovata nel documento verrà utilizzata per definire l'elemento root per l'auto-bootstrap come un'applicazione. Per eseguire più applicazioni in un documento HTML è necessario eseguirne il bootstrap manualmente utilizzando angular.bootstrap. Le applicazioni AngularJS non possono essere annidate l'una nell'altra. - http://docs.angularjs.org/api/ng.directive:ngApp
Guarda anche
ng-app(perché non funzionerà). ng-apppuò essere utilizzato solo una volta per documento HTML. È davvero solo una scorciatoia se hai solo un'app sulla pagina, che è il caso normale.
Ho creato una direttiva alternativa che non ha ngApplimitazioni. Si chiama ngModule. Ecco come apparirà il codice quando lo usi:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>Puoi ottenere il codice sorgente su:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
È essenzialmente lo stesso codice utilizzato internamente da AngularJS senza limitazioni.
Perché desideri utilizzare più [ng-app]? Poiché Angular viene ripreso utilizzando i moduli, è possibile utilizzare un'app che utilizza più dipendenze.
Javascript:
// setter syntax -> initializing other module for demonstration
angular.module('otherModule', []);
angular.module('app', ['otherModule'])
.controller('AppController', function () {
// ...do something
});
// getter syntax
angular.module('otherModule')
.controller('OtherController', function () {
// ...do something
});HTML:
<div ng-app="app">
<div ng-controller="AppController">...</div>
<div ng-controller="OtherController">...</div>
</div>MODIFICARE
Tieni presente che se vuoi usare il controller all'interno del controller devi usare la sintassi controllerAs, in questo modo:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>Puoi eseguire il bootstrap di più applicazioni angolari, ma:
1) È necessario eseguirne il bootstrap manualmente
2) Non dovresti usare "document" come root, ma il nodo in cui è contenuta l'interfaccia angolare:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);Questo sarebbe sicuro.
Il bootstrap manuale di entrambi i moduli funzionerà. Guarda questo
<!-- IN HTML -->
<div id="dvFirst">
<div ng-controller="FirstController">
<p>1: {{ desc }}</p>
</div>
</div>
<div id="dvSecond">
<div ng-controller="SecondController ">
<p>2: {{ desc }}</p>
</div>
</div>
// IN SCRIPT
var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');
angular.element(document).ready(function() {
angular.bootstrap(dvFirst, ['firstApp']);
angular.bootstrap(dvSecond, ['secondApp']);
});Ecco il collegamento al Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
NOTA: in html, non c'è ng-app. idè stato invece utilizzato.
Ho creato un POC per un'applicazione Angular utilizzando più moduli e prese di router per annidare le app secondarie in un'app a pagina singola. Puoi ottenere il codice sorgente su: https://github.com/AhmedBahet/ng-sub-apps
Spero che questo ti aiuti
ng-app="project"e dice che "questo ti consente di avere moduli che vengono eseguiti in diverse parti della pagina", ma il documento ngApp afferma che "è possibile utilizzare solo una direttiva per documento HTML".