AngularJS Multiple ng-app dentro de uma página

Acabei de começar a aprender Angular JS e criei algumas amostras básicas, no entanto, estou preso com o seguinte problema.

Eu criei 2 módulos e 2 controladores.

shoppingCart -> ShoppingCartController namesList -> NamesController 

Existem exibições associadas para cada controlador. A primeira visualização é renderizada, mas a segunda não é renderizada. Não há erros.

http://jsfiddle.net/ep2sQ/

Por favor me ajude a resolver este problema.

Também existe alguma possibilidade de adicionar console no modo de exibição para verificar quais valores são passados ​​do controlador.

por exemplo, no seguinte div podemos adicionar console.log e saída dos valores do controlador

 

Então, basicamente, como mencionado pelo Cherniv, precisamos inicializar os módulos para ter vários ng-app na mesma página. Muito obrigado por todas as inputs.

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

Para executar vários aplicativos em um documento HTML, você deve inicializá-los manualmente usando angular.bootstrap ()

HTML

  
...
...

JS

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

A razão para isso é que apenas um aplicativo AngularJS pode ser automaticamente autoinicializado por documento HTML. O primeiro ng-app encontrado no documento será usado para definir o elemento raiz como auto-bootstrap como um aplicativo.

Em outras palavras, embora seja tecnicamente possível ter vários aplicativos por página, apenas uma diretiva ng-app será automaticamente instanciada e inicializada pelo framework Angular.

Você pode usar angular.bootstrap() diretamente … o problema é que você perde os benefícios das diretivas.

Primeiro você precisa obter uma referência ao elemento HTML para inicializá-lo, o que significa que seu código está agora acoplado ao seu HTML.

Em segundo lugar, a associação entre os dois não é tão aparente. Com ngApp você pode ver claramente qual HTML está associada a qual módulo e você sabe onde procurar por essa informação. Mas o angular.bootstrap() pode ser invocado em qualquer lugar no seu código.

Se você vai fazer isso da melhor maneira seria usando uma diretiva. Qual foi o que eu fiz. É chamado ngModule . Aqui está como seu código se pareceria usando:

         

Module A, B

{{name}}
{{name}}

Just Module B

{{name}}

Você pode obter o código-fonte para isso em:

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

É implementado da mesma forma que o ngApp . Ele simplesmente chama angular.bootstrap() nos bastidores.

No meu caso eu tive que embrulhar o bootstrap do meu segundo aplicativo em angular.element(document).ready para ele funcionar:

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

Aqui está um exemplo de dois aplicativos em uma página html e dois conrollers em um aplicativo:

  

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

Você pode mesclar vários módulos em um rootModule e atribuir esse módulo como ng-app a uma tag ex: element do corpo superior.

código 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}}

Você pode definir um Root ng-App e neste ng-App você pode definir múltiplos nd-Controler. Como isso

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

Apenas um aplicativo é inicializado automaticamente. Outros precisam ser inicializados manualmente da seguinte maneira:

Sintaxe:

 angular.bootstrap(element, [modules]); 

Exemplo:

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

Eu modifiquei o seu jsfiddle, posso fazer o módulo mais alto como rootModule para o resto dos módulos. Abaixo Modificações atualizadas no seu jsfiddle.

  1. O segundo módulo pode ser injetado no RootModule.
  2. Em Html segundo ng-app definido colocado dentro da raiz ng-app.

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

Use angular.bootstrap(element, [modules], [config]) para iniciar manualmente o aplicativo AngularJS (para obter mais informações, consulte o guia Bootstrap ).

Veja o seguinte exemplo:

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