Estou tentando adicionar dois aplicativos / módulos angulares a uma página. Nos fiddles abaixo você pode ver que sempre apenas o primeiro módulo, referenciado no código html, funcionará corretamente, enquanto o segundo não é reconhecido pelo angular.
Neste violino podemos apenas executar o doSearch2método, enquanto neste violino apenas o doSearchmétodo funciona corretamente.
Estou procurando uma maneira de colocar corretamente dois módulos angulares em uma página.
Respostas:
Apenas um aplicativo AngularJS pode ser autoinicializado por documento HTML. O primeiro ngApp encontrado no documento será usado para definir o elemento raiz para autoinicialização como um aplicativo. Para executar vários aplicativos em um documento HTML, você deve inicializá-los manualmente usando angular.bootstrap. Os aplicativos AngularJS não podem ser aninhados uns nos outros. - http://docs.angularjs.org/api/ng.directive:ngApp
Veja também
ng-app(porque não vai funcionar). ng-appsó pode ser usado uma vez por documento HTML. Na verdade, é apenas um atalho se você tiver apenas um aplicativo na página, o que é normal.
Eu criei uma diretiva alternativa que não tem ngApplimitações. É chamado ngModule. Esta é a aparência de seu código ao usá-lo:
<!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>Você pode obter o código-fonte em:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
É essencialmente o mesmo código usado internamente pelo AngularJS sem limitações.
Por que você deseja usar vários [ng-app]? Como o Angular é retomado usando módulos, você pode usar um aplicativo que usa várias dependências.
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>EDITAR
Lembre-se de que se quiser usar o controlador dentro do controlador, você deve usar a sintaxe controllerAs, assim:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>Você pode inicializar vários aplicativos angulares, mas:
1) Você precisa inicializá-los manualmente
2) Você não deve usar "documento" como raiz, mas o nó onde a interface angular está contida para:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);Isso seria seguro.
A inicialização manual de ambos os módulos funcionará. Veja isso
<!-- 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']);
});Aqui está o link para o Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
NOTA: Em html, não existe ng-app. idfoi usado em seu lugar.
Fiz um POC para um aplicativo Angular usando vários módulos e saídas de roteador para aninhar subaplicativos em um aplicativo de página única. Você pode obter o código-fonte em: https://github.com/AhmedBahet/ng-sub-apps
Espero que isso ajude
ng-app="project"e diz que "isso permite que você tenha módulos que rodam em diferentes partes da página", mas o documento ngApp afirma que "apenas uma diretiva pode ser usada por documento HTML".