J'essaye d'ajouter deux applications / modules angulaires à une page. Dans les violons ci-dessous, vous pouvez voir que toujours seul le premier module, référencé dans le code html, fonctionnera correctement, alors que le second n'est pas reconnu par angular.
Dans ce violon, nous ne pouvons exécuter que la doSearch2méthode, alors que dans ce violon seule la doSearchméthode fonctionne correctement.
Je cherche comment placer correctement deux modules angulaires sur une seule page.
Réponses:
Une seule application AngularJS peut être amorcée automatiquement par document HTML. Le premier ngApp trouvé dans le document sera utilisé pour définir l'élément racine à amorcer automatiquement en tant qu'application. Pour exécuter plusieurs applications dans un document HTML, vous devez les amorcer manuellement en utilisant angular.bootstrap à la place. Les applications AngularJS ne peuvent pas être imbriquées les unes dans les autres. - http://docs.angularjs.org/api/ng.directive:ngApp
Voir également
ng-app(car cela ne fonctionnera pas). ng-appne peut être utilisé qu'une seule fois par document HTML. Ce n'est vraiment qu'un raccourci si vous n'avez qu'une seule application sur la page, ce qui est le cas normal.
J'ai créé une directive alternative qui n'a pas ngAppde limites. Ça s'appelle ngModule. Voici à quoi ressemblerait votre code lorsque vous l'utiliserez:
<!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>Vous pouvez obtenir le code source sur:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
C'est essentiellement le même code utilisé en interne par AngularJS sans les limitations.
Pourquoi voulez-vous utiliser plusieurs [ng-app]? Étant donné qu'Angular est repris à l'aide de modules, vous pouvez utiliser une application qui utilise plusieurs dépendances.
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>ÉDITER
Gardez à l'esprit que si vous souhaitez utiliser le contrôleur à l'intérieur du contrôleur, vous devez utiliser la syntaxe controllerAs, comme ceci:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>Vous pouvez amorcer plusieurs applications angulaires, mais:
1) Vous devez les amorcer manuellement
2) Vous ne devez pas utiliser "document" comme racine, mais le nœud où l'interface angulaire est contenue pour:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);Ce serait sûr.
L'amorçage manuel des deux modules fonctionnera. Regarde ça
<!-- 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']);
});Voici le lien vers le Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
REMARQUE: en html, il n'y a pas de fichier ng-app. ida été utilisé à la place.
J'ai créé un POC pour une application angulaire en utilisant plusieurs modules et sorties de routeur pour imbriquer des sous-applications dans une application d'une seule page. Vous pouvez obtenir le code source sur: https://github.com/AhmedBahet/ng-sub-apps
J'espère que cela aidera
ng-app="project"et indique que "cela vous permet d'avoir des modules qui s'exécutent dans différentes parties de la page" mais le document ngApp indique que "une seule directive peut être utilisée par document HTML".