python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions