AngularJS Múltiples ng-app dentro de una página

Question

AngularJS Múltiples ng-app dentro de una página

Acabo de empezar a aprender Angular JS y crear algunas muestras básicas, sin embargo, estoy atascado con el siguiente problema.

He creado 2 módulos y 2 controladores.

shoppingCart -> ShoppingCartController
namesList -> NamesController

Hay vistas asociadas para cada controlador. La primera vista se renderiza bien, pero la segunda no se renderiza. No hay errores.

Http://jsfiddle.net/ep2sQ /

Por favor, ayúdame a resolver este problema.

También hay alguna posibilidad de agregar consola a la vista para comprobar qué los valores se pasan desde el Controlador.

Por ejemplo, en el siguiente div podemos agregar consola. registrar y generar los valores del controlador

<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>

175

angularjs

Author: thomaux, 0000-00-00

Source

2 answers

Para ejecutar varias aplicaciones en un documento HTML, debe iniciarlas manualmente utilizando 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 razón de esto es que solo una aplicación AngularJS se puede arrancar automáticamente por documento HTML. El primer ng-app encontrado en el documento se utilizará para definir el elemento raíz a auto-bootstrap como

117

Author: ,
Warning: date() expects parameter 2 to be long, string given in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61

score 182 · Accepted Answer

Así que básicamente como lo mencionó Cherniv necesitamos arrancar los módulos para tener múltiples ng-app dentro de la misma página. Muchas gracias por todas las aportaciones.

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>