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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.