AngularJS Multiple ng-app all'interno di una pagina

180

Ho appena iniziato a studiare Angular JS e ho creato alcuni campioni di base, ma 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 visualizzata. Non ci sono errori

http://jsfiddle.net/ep2sQ/

Aiutatemi a risolvere questo problema.

Inoltre, è possibile aggiungere console in Visualizza per verificare quali valori vengono passati dal controller.

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

<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>
angularjs 
— Nitin Mukesh
fonte
10
Può essere questo aiuto sarà: stackoverflow.com/questions/12860595/...
— Cherniv
Grazie Cherniv. Questo è molto utile e ho risolto il problema usando il link che hai fornito. Potresti anche fornire informazioni su come utilizzare console.log per scaricare il controller in Visualizza / Modello {{console.log}} non funziona.
— Nitin Mukesh,
prego. nota che stai già facendo "console" in una vista, questo: in {{item.product_name}}realtà "stampa" un valore dal tuo modello
— Cherniv
1
C'è qualcosa di sbagliato nella creazione di più app per una webapp? Ho questo progetto in cui ogni pagina html ha la sua app, voglio sapere se le prestazioni saranno influenzate in ogni caso?
— T. Rex,
Sebbene sia possibile eseguire il bootstrap di più di un'applicazione AngularJS per pagina, non testiamo attivamente questo scenario. È possibile che si verifichino problemi, soprattutto con app complesse, quindi si consiglia cautela. Vedere la Guida per gli sviluppatori di AngularJS - Bootstrap .
— Georg

Risposte:

190

Quindi, fondamentalmente, come indicato da Cherniv, dobbiamo avviare i moduli per avere più app ng nella stessa pagina. Mille 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']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
  <h1>Your order</h1>
  <div ng-repeat="item in items">
    <span>{{item.product_name}}</span>
    <span>{{item.price | currency}}</span>
    <button ng-click="remove($index);">Remove</button>
  </div>
</div>

<div id="App2" ng-app="namesList" ng-controller="NamesController">
  <h1>List of Names</h1>
  <div ng-repeat="_name in names">
    <p>{{_name.username}}</p>
  </div>
</div>
Espandi frammento

— Nitin Mukesh
fonte
2
È possibile creare una direttiva per farlo invece stackoverflow.com/a/22898036/984780
— Luis Perez,
33
La documentazione angolare afferma che durante l'avvio manuale di un'app, NON utilizzare la direttiva ngApp. Quindi ng-app = "namesList" (potrebbe / dovrebbe) essere rievocato. docs.angularjs.org/guide/bootstrap
— Mike_K
4
Per coloro che hanno ng-app in due file js separati, il codice seguente può aiutare angular.element (document) .ready (function () {angular.bootstrap (document.getElementById ("App2"), ['namesList']) ;});
— Siva Kannan,
3
Nota: nella mia app, ho dovuto mettere questa riga "angular.bootstrap (document.getElementById (" App2 "), ['namesList']);" in $ (documento). già funzione
— La masse,
Non funziona per me. Solo la prima app ng funziona correttamente
— SIVAKUMAR.J
120

Per eseguire più applicazioni in un documento HTML è necessario avviarle manualmente usando angular.bootstrap ()

HTML

<!-- Automatic Initialization -->
<div ng-app="myFirstModule">
    ...
</div>
<!-- Need To Manually Bootstrap All Other Modules -->
<div id="module2">
    ...
</div>

JS

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

La ragione di ciò è che solo un'applicazione AngularJS può essere avviata automaticamente per documento HTML. Il primo ng-apptrovato nel documento verrà utilizzato per definire l'elemento radice per l'avvio automatico come applicazione.

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

— AlwaysALearner
fonte
20
È ngApppossibile eseguire il bootload automatico di una sola direttiva per documento HTML ma è possibile avere più app purché si avviino manualmente le successive.
— JaredMcAteer
@CodeHater dove si namesListtrova allora il modulo? Potresti per favore aggiornare la tua risposta, in modo che sia più chiara?
— Eugene,
Questo è sbagliato. È possibile avere più app ng. Vedere stackoverflow.com/a/24867989/753632
— AndroidDev
3
@AndroidDev, non seguo. Il link a cui fai riferimento non mostra più attributi di ng-app.
— Jpnh,
42

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

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

In secondo luogo l'associazione tra i due non è così evidente. Con ngApppuoi vedere chiaramente quale HTML è associato a quale modulo e sai dove cercare tali informazioni. Ma angular.bootstrap()potrebbe essere invocato da qualsiasi parte del codice.

Se hai intenzione di farlo nel migliore dei modi sarebbe utilizzando una direttiva. Questo è quello che ho fatto. Si chiama ngModule. Ecco come sarebbe il tuo codice usandolo:

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

È possibile ottenere il codice sorgente per esso a:

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

È implementato allo stesso modo di ngApp. Chiama semplicemente angular.bootstrap()dietro le quinte.

— Luis Perez
fonte
7

Ecco un esempio di due applicazioni in una pagina html e due lettori in una sola applicazione:

    <div ng-app = "myapp">
      <div  ng-controller = "C1" id="D1">
         <h2>controller 1 in app 1 <span id="titre">{{s1.title}}</span> !</h2>
      </div>

      <div  ng-controller = "C2" id="D2">
         <h2>controller 2 in app 1 <span id="titre">{{s2.valeur}}</span> !</h2>
      </div>
    </div>
    <script>
        var A1 = angular.module("myapp", [])

        A1.controller("C1", function($scope) {
            $scope.s1 = {};
            $scope.s1.title = "Titre 1";
         });

        A1.controller("C2", function($scope) {
            $scope.s2 = {};
            $scope.s2.valeur = "Valeur 2";
         });
    </script>

    <div ng-app="toapp" ng-controller="C1" id="App2">
        <br>controller 1 in app 2
        <br>First Name: <input type = "text" ng-model = "student.firstName">
        <br>Last Name : <input type="text" ng-model="student.lastName">
        <br>Hello : {{student.fullName()}}
        <br>
    </div>

    <script>
        var A2 = angular.module("toapp", []);
        A2.controller("C1", function($scope) {
            $scope.student={
                firstName:"M",
                lastName:"E",
                fullName:function(){
                    var so=$scope.student;
                    return so.firstName+" "+so.lastName;
                }
            };
        });
        angular.bootstrap(document.getElementById("App2"), ['toapp']);
    </script>
<style>
    #titre{color:red;}
    #D1{ background-color:gray; width:50%; height:20%;}
    #D2{ background-color:yellow; width:50%; height:20%;}
    input{ font-weight: bold; }
</style>

— merrais
fonte
6

Puoi unire più moduli in un rootModule e assegnare quel modulo come ng-app a un elemento superiore es: body tag.

codice ex:

    <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="namesController.js"></script>
<script src="myController.js"></script>
<script>var rootApp = angular.module('rootApp', ['myApp1','myApp2'])</script>
<body ng-app="rootApp">

<div ng-app="myApp1" ng-controller="myCtrl" >
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>

<div ng-app="myApp2" ng-controller="namesCtrl">
<ul>
  <li ng-bind="first">{{first}}
  </li>
</ul>
</div>

</body>
</html>
— Vijay Tripathi
fonte
4
Stai annidando due diverse app all'interno dell'app rootApp, Angular non consente l'annidamento di app
— codin
4 

         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']);
         });
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>

<body>

  <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
    <h1>Your order</h1>
    <div ng-repeat="item in items">
      <span>{{item.product_name}}</span>
      <span>{{item.price | currency}}</span>
      <button ng-click="remove($index);">Remove</button>
    </div>
  </div>

  <div id="App2" ng-app="namesList" ng-controller="NamesController">
    <h1>List of Names</h1>
    <div ng-repeat="_name in names">
      <p>{{_name.username}}</p>
    </div>
  </div>
  <div id="App3" ng-app="namesList2" ng-controller="NamesController">
    <h1>List of Names</h1>
    <div ng-repeat="_name in names">
      <p>{{_name.username}}</p>
    </div>
  </div>


</body>

</html>
Espandi frammento

— Praneeth
fonte
Solo un'estensione per avere più ng-app in una singola pagina ho dovuto solo combinare sia il codice saeb-amini che il codice @Nithin Mukesh - Grazie ad entrambi
— Praneeth,
Questo concetto funziona per me. angular.element (document) .ready (function () {angular.bootstrap (document.getElementById ("App2"), ['namesList']); angular.bootstrap (document.getElementById ("App3"), ['namesList2' ]);});
— SIVAKUMAR.J
2

Viene inizializzata automaticamente solo un'app. Altri devono inizializzare manualmente come segue:

Sintassi:

angular.bootstrap(element, [modules]);

Esempio:

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8" data-require="angular.js@1.5.8"></script>
  <script data-require="ui-router@0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script>
    var parentApp = angular.module('parentApp', [])
  .controller('MainParentCtrl', function($scope) {
    $scope.name = 'universe';
  });



var childApp = angular.module('childApp', ['parentApp'])
  .controller('MainChildCtrl', function($scope) {
    $scope.name = 'world';
  });


angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById('childApp'), ['childApp']);
});
    
  </script>
</head>

<body>
  <div id="childApp">
    <div ng-controller="MainParentCtrl">
      Hello {{name}} !
      <div>
        <div ng-controller="MainChildCtrl">
          Hello {{name}} !
        </div>
      </div>
    </div>
  </div>
</body>

</html>
Espandi frammento

API AngularJS

— Premraj
fonte
1

È possibile definire un'app ng root e in questa app ng è possibile definire più nd-Controler. Come questo

    <!DOCTYPE html>
    <html>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>

<style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }

         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }

         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>

     <script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller('studentController1', function ($scope) {
      $scope.student = {
      firstName: "MUKESH",
      lastName: "Paswan",

      fullName: function () {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
                     }
                 };
             });

             mainApp.controller('studentController2', function ($scope) {
                 $scope.student = {
                     firstName: "Mahesh",
                     lastName: "Parashar",
                     fees: 500,

                     subjects: [
                        { name: 'Physics', marks: 70 },
                        { name: 'Chemistry', marks: 80 },
                        { name: 'Math', marks: 65 },
                        { name: 'English', marks: 75 },
                        { name: 'Hindi', marks: 67 }
                     ],

                     fullName: function () {
                         var studentObject;
                         studentObject = $scope.student;
                         return studentObject.firstName + " " + studentObject.lastName;
                     }
                 };
             });
          </script>

    <body>
    <div ng-app = "mainApp">
    <div id="dv1"  ng-controller = "studentController1">
    Enter first name: <input type = "text" ng-model = "student.firstName"><br/><br/> Enter last name: <input type = "text" ng-model = "student.lastName"><br/>
    <br/>
     You are entering: {{student.fullName()}}
    </div>

    <div id="dv2" ng-controller = "studentController2">
     <table border = "0">
                <tr>
                   <td>Enter first name:</td>
                   <td><input type = "text" ng-model = "student.firstName"></td>
                </tr>

                <tr>
                   <td>Enter last name: </td>
                   <td>
                      <input type = "text" ng-model = "student.lastName">
                   </td>
                </tr>

                <tr>
                   <td>Name: </td>
                   <td>{{student.fullName()}}</td>
                </tr>

                <tr>
                   <td>Subject:</td>

                   <td>
                      <table>
                         <tr>
                            <th>Name</th>.
                            <th>Marks</th>
                         </tr>

                         <tr ng-repeat = "subject in student.subjects">
                            <td>{{ subject.name }}</td>
                            <td>{{ subject.marks }}</td>
                         </tr>

                      </table>
                   </td>

                </tr>
             </table>

          </div>
    </div>

    </body>
    </html>
— santosh
fonte
1 

// root-app
const rootApp = angular.module('root-app', ['app1', 'app2E']);

// app1
const app11aa = angular.module('app1', []);
app11aa.controller('main', function($scope) {
  $scope.msg = 'App 1';
});

// app2
const app2 = angular.module('app2E', []);
app2.controller('mainB', function($scope) {
  $scope.msg = 'App 2';
});

// bootstrap
angular.bootstrap(document.querySelector('#app1a'), ['app1']);
angular.bootstrap(document.querySelector('#app2b'), ['app2E']);
<!-- angularjs@1.7.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>

<!-- root-app -->
<div ng-app="root-app">

  <!-- app1 -->
  <div id="app1a">
    <div ng-controller="main">
      {{msg}}
    </div>
  </div>

  <!-- app2 -->
  <div id="app2b">
    <div ng-controller="mainB">
      {{msg}}
    </div>
  </div>

</div>
Espandi frammento

— Ruben Rivero
fonte
0

Ho modificato il tuo jsfiddle, posso fare la maggior parte dei moduli come rootModule per il resto dei moduli. Di seguito le modifiche aggiornate sul tuo jsfiddle.

  1. Il secondo modulo può essere iniettato in RootModule.
  2. In Html è stata definita la seconda app ng all'interno dell'app ng root.

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

— Mano
fonte
Qualche idea sul perché questo stia solo valutando il primo ng-app? jsfiddle.net/vwcbtzdg
— Si8
Inizialmente inizializzato solo automaticamente, altri devono inizializzare manualmente
— Mano
0

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

Vedi 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']);
<!-- angularjs@1.7.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>

<!-- root-app -->
<div ng-app="root-app">

  <!-- app1 -->
  <div id="app1">
    <div ng-controller="main">
      {{msg}}
    </div>
  </div>

  <!-- app2 -->
  <div id="app2">
    <div ng-controller="main">
      {{msg}}
    </div>
  </div>

</div>
Espandi frammento

— Yas
fonte
-5 
<html>
<head>
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="shoppingCartParentModule" >
     <div ng-controller="ShoppingCartController">
        <h1>Your order</h1>
        <div ng-repeat="item in items">
            <span>{{item.product_name}}</span>
            <span>{{item.price | currency}}</span>
            <button ng-click="remove($index);">Remove</button>
        </div>
    </div>

    <div ng-controller="NamesController">
        <h1>List of Names</h1>
        <div ng-repeat="name in names">
            <p>{{name.username}}</p>
        </div>
    </div>
</div>
</body>
<script>
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.module("shoppingCartParentModule",["shoppingCart","namesList"])
</script>
</html>
— Sirigiri Chandu
fonte
1
Aggiungi descrizione alla tua risposta quello che hai pubblicato
— Abhinav Singh Maurya,
1
Ha bisogno di commenti che spieghino cosa sta succedendo! Bel tentativo!
— Eric Brown - Cal
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.