AngularJS的多个ngApps，每个都有自己的ngRoute定义，在一个页面上惰性加载和引导

AngularJS multiple ngApps each with its own ngRoute definitions, lazyloaded and bootstrapped on one page

本文关键字：一个 加载 ngApps AngularJS 定义 ngRoute 自己的      更新时间：2023-09-26

我的问题来自于需要在一个页面上惰性加载不同的/独立的ngApps(用angular.bootstrap引导它们)，它们每个都使用自己的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 =

预览

仅供参考:我已经检查出ui-router在一个页面上加载单独的状态，但这一切都需要源代码被预先加载(并有一个单一的app.config与所有路由在它)，这是我不想要的东西，因为项目是相当巨大的。因此，为了保持它的简单和模块化，我寻找类似于上面的例子。

更新回答HockeyJ问题:好的，我会尽量简短的。就像我说的，从源代码和模块依赖的角度来看，这个项目可能会变得非常庞大。这就是为什么我想让它以这样一种方式，每个模块可以完全独立的应用程序，能够在任何地方注入和单独测试(这不是真正的问题与AnJS)。在同一时间，但整个项目，应该是一个单页的应用程序。因此，不应该有屏幕重新加载(加载一个应用程序jscript文件)等。因此出现了按需惰性加载脚本和将应用引导到DOM元素的问题。所有应用唯一可能的交叉点是URL路由，它对路由有严格的命名约定，例如/reports/等等;

UPDATED:

检查overmind项目的angular和这里的演示

显示一个项目分为几个应用程序:导航，主页，个人资料和管理。导航应用程序始终在页面上，并且是唯一一个在页面加载时引导的应用程序。

只要把路由从angular中拿出来，使用像sammy.js, history.js之类的东西来实现客户端路由。

使用

angular.bootstrap(module, node)

在您的Sammy处理程序的路线

你可能也想看看react.js(带或不带flux)，然后用同样的方式和sammy一起振作起来。考虑这个来自todombc的例子:https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/react

相关文章：