2

I followed the code in AngularJS Multiple ng-app within a page

I don't know what i'm missing.

    var reviewApp = angular.module("reviewApp", []);
var reviewApp2 = angular.module("reviewApp2", []);

reviewApp.controller("reviewCtrl",
                     function ShippingAddressCtrl($scope, $http) {
    $scope.name='leo1';
});

reviewApp2.controller("productController",
                     function ProductController($scope, $http) {
    $scope.name1='leo2';
});
angular.bootstrap(document.getElementById("div2"),['reviewApp2']);

http://jsfiddle.net/lordango/X3ZsU/1/

Community
  • 1
  • 1
lordango
  • 27
  • 1
  • 7

1 Answers1

10

When you are bootstrapping multiple apps, you can not use ng-app attribute more than once, angular takes the first one in markup and bootstraps it automatically, all the other ng-apps are ignored and you have to bootstrap them manually

var reviewApp = angular.module("reviewApp", []);
var reviewApp2 = angular.module("reviewApp2", []);

reviewApp.controller("reviewCtrl",
                     function ShippingAddressCtrl($scope, $http) {
    $scope.name='leo1';
});

reviewApp2.controller("productController",
                     function ProductController($scope, $http) {
    $scope.name1='leo2';
});
angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById("div1"),['reviewApp']);
    angular.bootstrap(document.getElementById("div2"),['reviewApp2']);
});

html

<div id="div1">
<div ng-controller="reviewCtrl">{{name}}</div>
</div>

<div id="div2">
<div ng-controller="productController">{{name1}}</div>
</div>
doodeec
  • 2,927
  • 19
  • 23
  • Not quite true. You can auto bootstrap one app on a page. I think the problem was the way that angular was added to the head of the document in the fiddle. Your snippet bootstraps on document ready and so gets around the problem in the fiddle. – Gruff Bunny Feb 20 '14 at 09:28
  • I was pointing out that the answer says 'you can not use ng-app attribute' when bootstrapping multiple apps. You can use ng-app once. – Gruff Bunny Feb 20 '14 at 09:38
  • Yes you are right, but I don't think it's a good practice to bootstrap apps in a different place. But I will edit the answer, thanks – doodeec Feb 20 '14 at 09:43
  • I understand now. bootstrapping is like manually attaching the angular app to a markup. Correct me if I'm wrong but does putting the script in the head fails because the elements have not been created yet and angular tries to bootstrap the app? – lordango Feb 21 '14 at 15:41
  • @doodeec in angular.js when does ng-app fire? when all the scripts have loaded? – FutuToad Jun 19 '14 at 09:08