AngularJS Múltiples ng-app dentro de una página
Acabo de comenzar a aprender Angular JS y creé algunos ejemplos básicos, sin embargo, tengo 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 procesa bien, pero la segunda no se procesa. No hay errores.
http://jsfiddle.net/ep2sQ/
Por favor ayudame a resolver este problema.
También existe la posibilidad de agregar una consola en la Vista para verificar qué valores se pasan desde el Controlador.
por ejemplo, en el siguiente div podemos agregar console.log y generar los valores del controlador
<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>
Básicamente, como mencionó Cherniv, necesitamos iniciar los módulos para tener múltiples ng-app dentro de la misma página. Muchas gracias por todos los aportes.
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>Para ejecutar varias aplicaciones en un documento HTML, debe iniciarlas manualmente usando 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 se puede iniciar automáticamente una aplicación AngularJS por documento HTML. El primero ng-appque se encuentra en el documento se utilizará para definir el elemento raíz que se iniciará automáticamente como una aplicación.
En otras palabras, si bien es técnicamente posible tener varias aplicaciones por página, el marco Angular solo creará e inicializará automáticamente una directiva ng-app.
