我的问题来自需要在一个页面上延迟加载不同/分离的 ngApp(使用 angular.bootstrap 引导它们)，每个 ngApp 都使用自己的 ngRoute 定义(以它们不相互重叠的方式定义) .
现在我有一个工作 plunkr示例和所有功能似乎都运行良好，但不知何故我觉得这不是正确的方法，所以这就是我在这里寻求建议的原因。
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified 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
仅供引用:我已经检查了 ui-router 以在一个页面上加载单独的状态，但这都需要预先加载源代码(并且有一个包含所有路由的 app.config)这是什么我不想要，因为该项目非常庞大。因此，为了保持简单和模块化，我正在寻找与上述示例类似的东西。
更新以回答 HockeyJ 问题: 好的，我会尽量保持简短。非常基本上 - 正如我所说，从源代码和模块依赖性的 Angular 来看，该项目可能会变得非常庞大。这就是为什么我想以这样的方式制作它，每个模块都可以是完全独立的应用程序，能够在任何地方注入(inject)并单独测试(这不是 AnJS 的真正问题)。但与此同时，整个项目应该是一个单页应用程序。因此，不应该有屏幕重新加载(加载 App jscript 文件)等。因此出现了按需延迟加载脚本并将应用程序引导到 DOM 元素。所有应用程序唯一可能的交叉点是 URL 路由，它对路由有严格的命名约定，即/reports/whatever ；/transactions/whatever 等等，应该由 ngRoute 管理。
最佳答案
更新:
结帐 overmind Angular 项目和演示 here
Shows a project broken up into several apps: nav, home, profile, and admin. The nav app is always on the page and is the only app bootstrapped on pageload.
只需将路由从 Angular 中移除，并使用诸如 sammy.js 、 history.js 等的东西进行客户端路由。
使用
angular.bootstrap(module, node)
在你的 sammy 处理程序的路由中
您可能还想看看 react.js(有或没有助焊剂)并以同样的方式使用 sammy 来解决它。考虑来自 todombc 的这个例子:https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/react
关于javascript - AngularJS 多个 ngApps，每个都有自己的 ngRoute 定义，在一页上延迟加载和引导，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25181386/