AngularJS Plusieurs ng-app dans une page

Question

AngularJS Plusieurs ng-app dans une page

Demandé el 2 de Septembre, 2013: Quand la question a-t-elle été
29364 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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

Demandé el 2 de Septembre, 2013 par Nitin Mukesh

10 votes

Peut-être que cela aidera : stackoverflow.com/questions/12860595/…

Commenté el 2 de Septembre, 2013 par Cherniv

0 votes

Merci Cherniv. C'est très utile et j'ai résolu le problème en utilisant le lien que vous avez fourni. Pourriez-vous également fournir des informations sur la façon d'utiliser console.log pour vider le Contrôleur dans la Vue/Modèle {{console.log}} ne fonctionne pas.

Commenté el 2 de Septembre, 2013 par Nitin Mukesh

0 votes

Vous êtes les bienvenus. Notez que vous effectuez déjà du "console" dans une vue, ceci : {{item.product_name}} affiche en réalité une valeur de votre modèle.

Commenté el 2 de Septembre, 2013 par Cherniv

Afficher 2 autres commentaires

Answer 1

5 Réponses

Answer 2

6voto

Vijay Tripathi Points 93

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

exemple de code:

<!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" >
Prénom: <input type="text" ng-model="firstName"><br>
Nom: <input type="text" ng-model="lastName"><br>
<br>
Nom complet: {{firstName + " " + lastName}}
</div>

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

</body>
</html>

Répondu el 6 de Juin, 2015 par Vijay Tripathi (93 Points )

Answer 3

4voto

Praneeth Points 319

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

    Votre commande

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

    Liste des noms

      {{_name.username}}

    Liste des noms

      {{_name.username}}

Répondu el 26 de Avril, 2016 par Praneeth (319 Points )

Answer 4

3voto

Ruben Points 11

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

      {{msg}}

      {{msg}}

Répondu el 24 de Septembre, 2018 par Ruben (11 Points )

Answer 5

2voto

premraj Points 120

Une seule application est automatiquement initialisée. Les autres doivent être initialisées manuellement comme suit:

Syntaxe:

angular.bootstrap(element, [modules]);

Exemple:

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

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

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

      Bonjour {{name}} !

          Bonjour {{name}} !

API AngularJS

Répondu el 7 de Mai, 2017 par premraj (120 Points )

Answer 6

1voto

santosh Points 29

Vous pouvez définir une ng-App racine et dans cette ng-App vous pouvez définir plusieurs nd-Controler. Comme ceci

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

      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: 'Anglais', marks: 75 },
                        { name: 'Hindi', marks: 67 }
                     ],

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

    Entrez le prénom:  Entrez le nom: 

     Vous entrez: {{student.fullName()}}

                   Entrez le prénom:

                   Entrez le nom: 

                   Nom: 
                   {{student.fullName()}}

                   Matière:

                      .

                            NomMarques

                            {{ subject.name }}
                            {{ subject.marks }}

Répondu el 28 de Septembre, 2015 par santosh (29 Points )

AngularJS Plusieurs ng-app dans une page

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

AngularJS Plusieurs ng-app dans une page

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: