Donc, fondamentalement, comme mentionné par Cherniv, nous devons amorcer les modules pour avoir plusieurs applications ng dans la même page. Merci beaucoup pour toutes les entrées.

 var shoppingCartModule = angular.module("shoppingCart", []) shoppingCartModule.controller("ShoppingCartController", function($scope) { $scope.items = [{ product_name: "Product 1", price: 50 }, { product_name: "Product 2", price: 20 }, { product_name: "Product 3", price: 180 }]; $scope.remove = function(index) { $scope.items.splice(index, 1); } } ); var namesModule = angular.module("namesList", []) namesModule.controller("NamesController", function($scope) { $scope.names = [{ username: "Nitin" }, { username: "Mukesh" }]; } ); angular.bootstrap(document.getElementById("App2"), ['namesList']); 

  
 
Your order
 
 {{item.product_name}} {{item.price | currency}} Remove 
 
 
 
List of Names
 
 
{{_name.username}}
 
  

Pour exécuter plusieurs applications dans un document HTML, vous devez les démarrer manuellement à l’aide d’ angular.bootstrap ()

HTML

  
 ... 
  
 ...  

JS

 angular. bootstrap(document.getElementById("module2"), ['mySecondModule']); 

La raison en est que seule une application AngularJS peut être automatiquement initialisée par document HTML. Le premier ng-app trouvé dans le document sera utilisé pour définir l’élément racine à auto-bootstrap en tant qu’application.

En d’autres termes, s’il est techniquement possible d’avoir plusieurs applications par page, une seule directive ng-app sera automatiquement instanciée et initialisée par le framework Angular.

Vous pouvez utiliser angular.bootstrap() directement … le problème est que vous perdez les avantages des directives.

Tout d’abord, vous devez obtenir une référence à l’élément HTML afin de le démarrer, ce qui signifie que votre code est maintenant associé à votre code HTML.

Deuxièmement, l’association entre les deux n’est pas aussi évidente. Avec ngApp vous pouvez voir clairement quel HTML est associé à quel module et vous savez où chercher cette information. Mais angular.bootstrap() peut être angular.bootstrap() de n’importe où dans votre code.

Si vous voulez le faire, le mieux serait d’utiliser une directive. C’est ce que j’ai fait. Il s’appelle ngModule . Voici à quoi ressemblerait votre code en l’utilisant:

         
 
Module A, B
 
 {{name}} 
 
 {{name}} 
 
 
 
Just Module B
 
 {{name}} 
 
   

Vous pouvez obtenir le code source à l’adresse suivante:

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

Il est implémenté de la même manière que ngApp . Il appelle simplement angular.bootstrap() en coulisse.

Dans mon cas, j’ai dû envelopper le bootstrap de ma deuxième application dans angular.element(document).ready .

 angular.element(document).ready(function() { angular.bootstrap(document.getElementById("app2"), ["app2"]); }); 

Voici un exemple de deux applications dans une page HTML et de deux contrôleurs dans une application:

  
 
 
controller 1 in app 1 {{s1.title}} !
 
 
 
controller 2 in app 1 {{s2.valeur}} !
 
 
  
 
controller 1 in app 2 
First Name:  
Last Name :  
Hello : {{student.fullName()}} 
 
   

Vous pouvez fusionner plusieurs modules dans un rootModule et affecter ce module en tant que ng-app à un élément supérieur ex: body tag.

code ex:

         
 First Name: 
 Last Name: 
 
 Full Name: {{firstName + " " + lastName}} 
 
 
 
{{first}} 
 
 
   

Vous pouvez définir une application racine ng et dans cette application ng, vous pouvez définir plusieurs contrôleurs nd. Comme ça

        
 
 Enter first name: 

 Enter last name: 
 
 You are entering: {{student.fullName()}} 
 
 
 
 
Enter first name:
 
 
 
 
Enter last name: 
 
  
 
 
 
Name: 
 
{{student.fullName()}}
 
 
 
Subject:
 
 . 
 
 
Name
Marks
 
 
 
{{ subject.name }}
 
{{ subject.marks }}
 
 
 
 
 
 
 
   

Une seule application est automatiquement initialisée. D’autres doivent être initialisés manuellement comme suit:

Syntaxe:

 angular.bootstrap(element, [modules]); 

Exemple:

          
 
 Hello {{name}} ! 
 
 Hello {{name}} ! 
 
 
 
   

J’ai modifié votre jsfiddle, peut faire le plus haut module en tant que rootModule pour le rest des modules. Modifications ci-dessous mises à jour sur votre jsfiddle.

1. Le deuxième module peut être injecté dans RootModule.
2. Dans Html deuxième ng-app défini placé dans la racine ng-app.

Updated JsFiddle: http://jsfiddle.net/ep2sQ/1011/

Utilisez angular.bootstrap(element, [modules], [config]) pour démarrer manuellement l’application AngularJS (pour plus d’informations, consultez le guide Bootstrap ).

Voir l’exemple suivant:

 // root-app const rootApp = angular.module('root-app', ['app1', 'app2']); // app1 const app1 = angular.module('app1', []); app1.controller('main', function($scope) { $scope.msg = 'App 1'; }); // app2 const app2 = angular.module('app2', []); app2.controller('main', function($scope) { $scope.msg = 'App 2'; }); // bootstrap angular.bootstrap(document.querySelector('#app1'), ['app1']); angular.bootstrap(document.querySelector('#app2'), ['app2']); 

    
  
 
 {{msg}} 
 
  
 
 {{msg}} 
 
  

      
 
 
Your order
 
 {{item.product_name}} {{item.price | currency}} Remove 
 
 
 
List of Names
 
 
{{name.username}}