Seeking advice on lazy loading separate ngApps on one page and bootstrapping them using angular.bootstrap, each with its own unique ngRoute definitions to prevent overlap.
I have a functioning plunkr example that appears to be working well, but I am unsure if this is the correct approach, hence reaching out for guidance.
<!DOCTYPE html>
<html>
<head>
<!-- Latest CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="col-xs-6 well" id="app1">
<h3>App1</h3>
<a href="#/app1/1">Route 1</a>
<a href="#/app1/2">Route 2</a>
<a href="#/app1/3">Route 3</a>
<div class="well" ng-view></div>
</div>
<div class="col-xs-6 well" id="app2">
<h3>App2</h3>
<a href="#/app2/1">Route 1</a>
<a href="#/app2/2">Route 2</a>
<a href="#/app2/3">Route 3</a>
<div class="well" ng-view></div>
</div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.2.21/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.2.21/angular-route.min.js"></script>
<script>
var app1 = angular.module('app1', ['ngRoute']);
app1
.config(function($routeProvider) {
$routeProvider
.when('/:app/:param', {
template: 'app = {{app}}, param = {{param}}',
controller: 'Ctrl1'
})
})
.controller("Ctrl1",['$scope','$routeParams', function($scope,$routeParams) {
$scope.app = $routeParams.app;
$scope.param = $routeParams.param;
}]);
var app2 = angular.module('app2', ['ngRoute']);
app2
.config(function($routeProvider) {
$routeProvider
.when('/:app/:param', {
template: 'app = {{app}}, param = {{param}}',
controller: 'Ctrl2'
})
})
.controller("Ctrl2", ['$scope','$routeParams', function($scope,$routeParams) {
$scope.app = $routeParams.app;
$scope.param = $routeParams.param;
}]);
angular.bootstrap(document.getElementById("app1"), ['app1']);
angular.bootstrap(document.getElementById("app2"), ['app2']);
</script>
</body>
</html>
http://plnkr.co/edit/Y7A9bc3bDUyAXIS13JMZ?p=preview
FYI: Explored ui-router for loading separate states on the same page, but requires upfront source code loading with a single app.config containing all routes, which isn't ideal for a large project. Looking for a simpler, modular solution like the example above.
UPDATE in response to HockeyJ's question: The project has potential to grow significantly in terms of source code and module dependencies. Want to ensure each module can act as a standalone App, injectable at any point for testing purposes. Simultaneously, the entire project should operate as a single page app without screen reloads when loading App JavaScript files. Thus, adopting lazy loading of scripts on demand and bootstrapping apps to DOM elements. All Apps meet at URL routing with distinct naming conventions (e.g., /reports/whatever; /transactions/whatever) managed by ngRoute.