nagasudhirpulla/angular_multiple_modules_views.html

## angular_multiple_modules_views.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body>

<div id="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</div>

<div id="myApp2">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</div>

<script>
/*
https://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page/18583329#18583329
https://docs.angularjs.org/guide/bootstrap
*/

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/red", {
        templateUrl : "red.htm"
    })
    .when("/green", {
        templateUrl : "green.htm"
    })
    .when("/blue", {
        templateUrl : "blue.htm"
    });
});

var app2 = angular.module("myApp2", ["ngRoute"]);
app2.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/red", {
        templateUrl : "green.htm"
    })
    .when("/green", {
        templateUrl : "blue.htm"
    })
    .when("/blue", {
        templateUrl : "red.htm"
    });
});

angular.bootstrap(document.getElementById("myApp"), ['myApp']);
angular.bootstrap(document.getElementById("myApp2"), ['myApp2']);
/*
Notice that angular.bootstrap will not create modules on the fly. You must create any custom modules before you pass them as a parameter.
You should not use the ng-app directive when manually bootstrapping your app.
*/
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
	<body>

	<div id="myApp">
	<p><a href="#/!">Main</a></p>
	<a href="#!red">Red</a>
	<a href="#!green">Green</a>
	<a href="#!blue">Blue</a>
	<div ng-view></div>
	<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
	</div>

	<div id="myApp2">
	<p><a href="#/!">Main</a></p>
	<a href="#!red">Red</a>
	<a href="#!green">Green</a>
	<a href="#!blue">Blue</a>
	<div ng-view></div>
	<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
	</div>

	<script>
	/*
	https://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page/18583329#18583329
	https://docs.angularjs.org/guide/bootstrap
	*/

	var app = angular.module("myApp", ["ngRoute"]);
	app.config(function($routeProvider) {
	$routeProvider
	.when("/", {
	templateUrl : "main.htm"
	})
	.when("/red", {
	templateUrl : "red.htm"
	})
	.when("/green", {
	templateUrl : "green.htm"
	})
	.when("/blue", {
	templateUrl : "blue.htm"
	});
	});

	var app2 = angular.module("myApp2", ["ngRoute"]);
	app2.config(function($routeProvider) {
	$routeProvider
	.when("/", {
	templateUrl : "main.htm"
	})
	.when("/red", {
	templateUrl : "green.htm"
	})
	.when("/green", {
	templateUrl : "blue.htm"
	})
	.when("/blue", {
	templateUrl : "red.htm"
	});
	});

	angular.bootstrap(document.getElementById("myApp"), ['myApp']);
	angular.bootstrap(document.getElementById("myApp2"), ['myApp2']);
	/*
	Notice that angular.bootstrap will not create modules on the fly. You must create any custom modules before you pass them as a parameter.
	You should not use the ng-app directive when manually bootstrapping your app.
	*/
	</script>
	</body>
	</html>