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

J'ai modifié votre jsfiddle, vous pouvez faire du module du haut le rootModule pour le reste des modules.   Modifications ci-dessous mises à jour sur votre jsfiddle.

1. Le deuxième module peut être injecté dans RootModule.
2. Dans Html, le deuxième ng-app défini est placé à l'intérieur du ng-app racine.

JsFiddle mis à jour: http://jsfiddle.net/ep2sQ/1011/

Answer 2

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

Voici un exemple :

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

Answer 3

        Votre commande

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

        Liste des noms

            {{name.username}}

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.module("shoppingCartParentModule",["shoppingCart","namesList"])