JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.2/angular.min.js"></script>
<script type="text/javascript">
var app1 = angular.module("app1", [], function($routeProvider) {
$routeProvider
.when("/1", { template: "<h1>app 1 page 1</h1>" })
.when("/2", { template: "<h1>app 1 page 2</h1>" })
.otherwise({ redirectTo: "/1" });
});
var app2 = angular.module("app2", [], function($routeProvider) {
$routeProvider
.when("/1", { template: "<h1>app 2 page 1</h1>" })
.when("/2", { template: "<h1>app 2 page 2</h1>" })
.otherwise({ redirectTo: "/1" });
});
$(function() {
angular.bootstrap($(".app1")[0], ["app1"]);
angular.bootstrap($(".app2")[0], ["app2"]);
});
</script>
</head>
<body>
<div class="app1">
<h1>App 1</h1>
<ul>
<li><a href="#/1">Go 1</a></li>
<li><a href="#/2">Go 2</a></li>
</ul>
<ng-view></ng-view>
</div>
<div class="app2">
<h1>App 2</h1>
<ul>
<li><a href="#/1">Go 1</a></li>
<li><a href="#/2">Go 2</a></li>
</ul>
<ng-view></ng-view>
</div>
</body>
</html>
JavaScript
angular.module("app1", []);
angular.module("app2", []);
$(function() {
angular.bootstrap($(".app1")[0], ["app1"]);
angular.bootstrap($(".app2")[0], ["app2"]);
});
angular.module("page",["app1","app2"], function($routeProvider) {
$routeProvider
.when("/1", { template: "<h1>app 1 page 1</h1>" })
.when("/2", { template: "<h1>app 1 page 2</h1>" })
.otherwise({ redirectTo: "/1" });
});