AngularJS Plusieurs ng-app dans une page

Question

Je viens de commencer à apprendre Angular JS et j'ai créé quelques exemples de base mais je suis bloqué avec le problème suivant.

J'ai créé 2 modules et 2 contrôleurs.

shoppingCart -> ShoppingCartController
namesList -> NamesController

Il y a des vues associées à chaque contrôleur. La première vue se rend bien mais la deuxième ne se rend pas. Il n'y a pas d'erreurs.

http://jsfiddle.net/ep2sQ/

S'il vous plaît aidez-moi à résoudre ce problème.

Est-il également possible d'ajouter la console dans la vue pour vérifier quelles valeurs sont transmises depuis le contrôleur.

Par exemple, dans le div suivant, pouvons-nous ajouter console.log et afficher les valeurs du contrôleur

Answer 1

Essentiellement, comme l'a mentionné Cherniv, nous devons initialiser les modules pour avoir plusieurs ng-app sur la même page. Merci beaucoup pour toutes les contributions.

var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
  function($scope) {
    $scope.items = [{
      product_name: "Produit 1",
      price: 50
    }, {
      product_name: "Produit 2",
      price: 20
    }, {
      product_name: "Produit 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']);

  Votre commande

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

  Liste des noms

    {{_name.username}}

Answer 2

Pour exécuter plusieurs applications dans un document HTML, vous devez les initialiser manuellement en utilisant angular.bootstrap()

HTML

    ...

    ...

JS

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

---

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

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

Answer 3

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 lié à votre HTML.

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

Si vous allez le faire, la meilleure façon serait d'utiliser une directive. C'est ce que j'ai fait. Elle s'appelle ngModule. Voici à quoi ressemblerait votre code en l'utilisant :

          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";
          });

            Module A, B

                {{name}}

                {{name}}

            Just Module B

                {{name}}

Vous pouvez obtenir le code source à :

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

C'est implémenté de la même manière que ngApp. Elle appelle simplement angular.bootstrap() en arrière-plan.

Answer 4

Dans mon cas, j'ai dû envelopper le démarrage de mon deuxième application dans angular.element(document).ready pour que cela fonctionne :

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

Answer 5

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

         contrôleur 1 dans l'application 1 {{s1.title}} !

         contrôleur 2 dans l'application 1 {{s2.valeur}} !

        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";
         });

        contrôleur 1 dans l'application 2
        Prénom : 
        Nom : 
        Bonjour : {{student.fullName()}}

        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']);

    #titre{color:red;}
    #D1{ background-color:gray; width:50%; height:20%;}
    #D2{ background-color:yellow; width:50%; height:20%;}
    input{ font-weight: bold; }