AngularJS Multiple ng-app all’interno di una pagina

Ho appena iniziato ad imparare Angular JS e ho creato alcuni campioni di base, tuttavia sono bloccato con il seguente problema.

Ho creato 2 moduli e 2 controller.

shoppingCart -> ShoppingCartController namesList -> NamesController 

Ci sono viste associate per ogni controller. La prima vista viene visualizzata correttamente ma la seconda non viene resa. Non ci sono errori

http://jsfiddle.net/ep2sQ/

Per favore aiutami a risolvere questo problema.

C’è anche la possibilità di aggiungere la console in Visualizza per verificare quali valori sono passati da Controller.

ad esempio nel seguente div possiamo aggiungere console.log e generare i valori del controller

 

Quindi, come detto da Cherniv, abbiamo bisogno di riavviare i moduli per avere più ng-app all’interno della stessa pagina. Molte grazie per tutti gli input.

 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}}

List of Names

{{_name.username}}

Per eseguire più applicazioni in un documento HTML, è necessario eseguirne il boot manualmente usando angular.bootstrap ()

HTML

  
...
...

JS

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

Il motivo è che solo un’applicazione AngularJS può essere automaticamente riavviata per documento HTML. La prima ng-app trovata nel documento verrà utilizzata per definire l’elemento radice su auto-bootstrap come applicazione.

In altre parole, mentre è tecnicamente ansible avere diverse applicazioni per pagina, solo una direttiva ng-app verrà automaticamente istanziata e inizializzata dal framework Angular.

Puoi usare angular.bootstrap() direttamente … il problema è che perdi i benefici delle direttive.

Per prima cosa devi ottenere un riferimento all’elemento HTML per poterlo riavviare, il che significa che il tuo codice ora è accoppiato al tuo HTML.

In secondo luogo, l’associazione tra i due non è così evidente. Con ngApp puoi vedere chiaramente quale HTML è associato a quale modulo e sai dove cercare quelle informazioni. Ma angular.bootstrap() potrebbe essere invocato da qualsiasi punto del tuo codice.

Se hai intenzione di farlo in tutto il modo migliore sarebbe utilizzando una direttiva. Che è quello che ho fatto Si chiama ngModule . Ecco come sarà il tuo codice utilizzandolo:

         

Module A, B

{{name}}
{{name}}

Just Module B

{{name}}

Puoi ottenere il codice sorgente per:

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

È implementato allo stesso modo di ngApp . Semplicemente chiama angular.bootstrap() dietro le quinte.

Nel mio caso ho dovuto avvolgere il bootstrap della mia seconda app in angular.element(document).ready Per farlo funzionare:

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

Ecco un esempio di due applicazioni in una pagina html e due conrollers in un’unica applicazione:

  

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()}}

È ansible unire più moduli in un rootModule e assegnare tale modulo come ng-app a un elemento superiore ex: body tag.

codice ex:

         
First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}
  • {{first}}
  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" }]; } ); var namesModule = angular.module("namesList2", []) namesModule.controller("NamesController", function($scope) { $scope.names = [{ username: "Nitin" }, { username: "Mukesh" }]; } ); angular.element(document).ready(function() { angular.bootstrap(document.getElementById("App2"), ['namesList']); angular.bootstrap(document.getElementById("App3"), ['namesList2']); }); 
       

Your order

{{item.product_name}} {{item.price | currency}}

List of Names

{{_name.username}}

List of Names

{{_name.username}}

È ansible definire una Root ng-App e in questa ng-App è ansible definire più nd-Controler. Come questo

        
Enter first name:

Enter last name:

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

Solo un’app viene inizializzata automaticamente. Altri devono inizializzarsi manualmente come segue:

Sintassi:

 angular.bootstrap(element, [modules]); 

Esempio:

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

Ho modificato il tuo jsfiddle, posso rendere più in alto il modulo come rootModule per il resto dei moduli. Sotto le modifiche aggiornate sul tuo jsfiddle.

  1. Il secondo modulo può essere iniettato in RootModule.
  2. In Html, la seconda ng-app definita è stata inserita nell’app Root ng.

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

Utilizzare angular.bootstrap(element, [modules], [config]) per avviare manualmente l’applicazione AngularJS (per ulteriori informazioni, consultare la guida Bootstrap ).

Guarda il seguente esempio:

 // 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}}

List of Names

{{name.username}}