How multiple ng-app works in angular

I tried giving two ng-app in an application , when i gave two ng-app like

 <body>
    <div ng-app="A">
        <div ng-controller="AC">
        </div>
    </div>


    <div ng-app="B">
        <div ng-controller="BC">
        </div>
    </div>

</body>

Then second ng-app does not work.

But when i change the scope of first ng-app="A" from div to body then both works fine like

<body ng-app="A">
<div>
    <div ng-controller="AC">
    </div>
</div>


<div ng-app="B">
    <div ng-controller="BC">
    </div>
</div>
</body>

Can anyone let me know why this behavior as i am quite new to angular. I wanted to know why it worked as i didn't called angular.bootstrap on the second one.I tried searching but i didn't got how it is working when changing the scope of ng-app from div to body.

Find the fiddle for the same https://jsfiddle.net/maddyjolly2112/wyfd0djp/1/ and mind copying the js into the same .

P.S. - If you guys cannot answer the question ,don't downvote it without reason

George Stocker

Docs say: Don't use `ngApp` when instantiating multiple angular applications.

The reason you can't do this is laid out in the docs for the ngApp directive.

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

But Bootstraping multiple Angular apps is possible...

To bootstrap multiple Angular apps, you have to reference each, and they logically can't be nested, or sharing an element; they need to be separate from each other. Because of this, you cannot use the directive, ngApp:

  <html>
    <head></head>
    <body>
    <script src="angular.js"></script>
    <div id="appElementA"></div>
    <div id="appElementB"></div>
    <script>
      var app = angular.module('A', [])
      .controller('AB', function($scope) {
          $scope.greeting = 'Welcome!';
      });
      var appElementA = document.getElementById('divAppA');
      angular.bootstrap(appElementA, ['A']);
    var bApp = angular.module('B', [])
      .controller('BB', function($scope) {
          $scope.greeting = 'Welcome to B app!';
      });
      var appElementB = document.getElementById('divAppB');
      angular.bootstrap(appElementB, ['B']);
    </script>
    </body>
    </html>

The above code would be how you'd do it for your apps. You'd then have to be sure you're assigning the controllers to the right angular application (app vs bApp, in the above example.)

But don't nest them!

You claim it 'works' when you nest them, but you should be aware that it doesn't work, it just doesn't crash hard. Don't have multiple angular applications nested. You'll encounter weird issues, especially if you have multiple variables named the same bound to the $rootScope.

But you can nest them without ill effects, right?

If you're intent on having two Angular apps nested; it's possible but extremely version specific and liable to break in weird ways. This Stack Overflow answer talks about it.

From Angular's official docs :

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

Source : https://docs.angularjs.org/api/ng/directive/ngApp

If the question is : why the second example works and not the first, the answer is in the link above > Angular needs the first ngApp to be placed near the root element of the page (html or body).

As George mentioned, manual bootstrapping will work. In html, use id instead of ng-app.

In script

var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');

angular.element(document).ready(function() {
   angular.bootstrap(dvFirst, ['firstApp']);
   angular.bootstrap(dvSecond, ['secondApp']);
});

Here is a working plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview

来源：https://stackoverflow.com/questions/34725602/how-multiple-ng-app-works-in-angular

标签

javascript