How to use Multiple ng-app within one page in AngularJs

How to use Multiple ng-app within one page in AngularJs?

There are two ways to develop the multiple ng-app within one page which are given below.

1. In the first one method, we can use the angular.bootstrap() method.
2. In the second one, we can use ngModule directives.

Here is some disadvantage of using angular.bootstrap() methods and some advantage of using of ngMdule directives.

So we can say that the best way is ngMdule directives. The example are given below.

Click for live demo on plunker

Example.

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
  <script>
    var appA1 = angular.module("MyAppA1", []);
    var appB1 = angular.module("MyAppB1", []);
    appA1.controller("CtrlA1", function($scope) {
      $scope.name = "Anil Singh";
    });
    appB1.controller("CtrlB1", function($scope) {
      $scope.name = "Dilip Singh";
    });
  </script>
</head>
<body>
  <div ng-modules="MyAppA1, MyAppB1">
    <div>The Test of Module A1 and B1</div>
    <div ng-controller="CtrlA1">
      {{name}}
    </div>
    <div ng-controller="CtrlB1">
      {{name}}
    </div>
  </div>
  <div ng-module="MyAppA1">
    <div>The Test of Module A1</div>
    <div ng-controller="CtrlA1">{{name}}</div>
  </div>
  <div ng-module="MyAppB1">
    <div>The Test of Module B1</div>
    <div ng-controller="CtrlB1">{{name}}</div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
  <script src="https://code.angularjs.org/1.3.0-rc.2/angular.ng-modules.js"></script>
  <script>
    var appA1 = angular.module("MyAppA1", []);
    var appB1 = angular.module("MyAppB1", []);

    appA1.controller("CtrlA1", function($scope) {
      $scope.name = "Anil Singh";
    });

    appB1.controller("CtrlB1", function($scope) {
      $scope.name = "Dilip Singh";
    });
  </script>
</head>
<body>
  <div ng-modules="MyAppA1, MyAppB1">
    <div>The Test of Module A1 and B1</div>
    <div ng-controller="CtrlA1">
      {{name}}
    </div>
    <div ng-controller="CtrlB1">
      {{name}}
    </div>
  </div>

  <div ng-module="MyAppA1">
    <div>The Test of Module A1</div>
    <div ng-controller="CtrlA1">{{name}}</div>
  </div>

  <div ng-module="MyAppB1">
    <div>The Test of Module B1</div>
    <div ng-controller="CtrlB1">{{name}}</div>
  </div>
</body>

</html>
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.