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.
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>