web-dev-qa-db-fra.com

Comment définir deux applications/modules angulaires sur une page?

J'essaie d'ajouter deux applications/modules angulaires à une page . Dans les violons ci-dessous, vous pouvez voir que 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 méthode doSearch2, alors que dans ce violon , seule la méthode doSearch fonctionne correctement.

Je cherche le moyen de placer correctement deux modules angulaires dans une page.

javascriptangularjs
116
Thomas Kremmel

Une seule application AngularJS peut être démarrée automatiquement par document HTML. Le premier ngApp trouvé dans le document servira à définir l'élément racine à initialiser automatiquement en tant qu'application. Pour exécuter plusieurs applications dans un document HTML, vous devez les amorcer manuellement en utilisant angular.bootstrap. Les applications AngularJS ne peuvent pas être imbriquées les unes dans les autres . - http://docs.angularjs.org/api/ng.directive:ngApp

Voir également

121
Mark Rajcok

J'ai créé une directive alternative qui n'a pas de limitations de ngApp. Cela 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.

38
Luis Perez

Pourquoi voulez-vous utiliser plusieurs [ng-app]? Angular étant repris à l'aide de modules, vous pouvez utiliser une application utilisant 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>

MODIFIER

Gardez à l'esprit que si vous voulez utiliser le contrôleur à l'intérieur du contrôleur, vous devez utiliser la syntaxe controllerAs, comme suit:

<div ng-app="app">
    <div ng-controller="AppController as app">
        <div ng-controller="OtherController as other">...</div>
    </div>
</div>
19
Monkey Monk

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 sur lequel l'interface angulaire est contenue pour:

var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);

Ce serait sans danger.

9
Wouter

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

NOTE: En HTML, il n'y a pas de ng-app. id a été utilisé à la place.

2
Hari Das

J'ai créé un POC pour une application angulaire utilisant plusieurs modules et routeurs-sorties pour imbriquer des sous-applications dans une application d'une seule page . Vous pouvez obtenir le code source à l'adresse: https://github.com/AhmedBahet/ng- sous-applications

J'espère que cela aidera

0
abahet