是否可以让 AngularJS 中的子模块使用 ui-router 控制自己的路由？答案

【问题标题】：Is it possible to let submodules in AngularJS control their own routing using ui-router?是否可以让 AngularJS 中的子模块使用 ui-router 控制自己的路由？
【发布时间】：2016-08-16 16:27:46
【问题描述】：

这是场景：

我有一个主要的 AngularJS 应用程序，它使用 ui-router 进行路由，就像任何其他应用程序一样。我还有一个较小的 AngularJS 模块，它作为自己的应用程序运行，不需要它是我的较大应用程序的子模块。

我也希望较小的应用程序也能处理自己的路由和模板。这里的目标是，迷你应用程序可以由另一个 AngularJS 应用程序加载，或者自己加载，并且已经设置了它的所有路由和模板。

主应用：

  angular
    .module('mainApp')
    .config(['$stateProvider', function($stateProvider) {
      $stateProvider
        .state('mainAppParent', {
          url: '/',
          templateUrl: 'main.html',
          controller: 'mainCtrl',
          controllerAs: 'vm'
        })
        .state('mainAppParent.miniJournalApp', {
          url: '/journal'
        });
     }]);

小程序：

  angular
    .module('miniJournalApp')
    .config(['$stateProvider', function($stateProvider) {
      $stateProvider
        .state('mainJournalState', {
          url: '/',
          templateUrl: 'mainJournalView.html',
          controller: 'JournalCtrl',
          controllerAs: 'vm'
        })
        .state('newEntry', {
          url: '/new'
        });
     }]);

我打算让迷你应用程序的所有组件都成为 AngularJS .component()，所以我想知道这样做的正确方法是否是让父应用程序处理路由，并让迷你应用程序在我定义每个组件/指令时处理模板。然后，当我想自己加载迷你应用程序时，我只需编写一个带有新路由的包装 AngularJS 模块。

【问题讨论】：

标签： angularjs angularjs-directive angular-ui-router

【解决方案1】：

我们可以看到，在 Angular ui 路由器中，我们使用的是 $stateProvider，所以基本上我们使用的是提供者。

在 Angular 应用程序中，提供者被加载一次，然后 Angular 将实例放入缓存中，这样下次当提供者被注入某个地方时，就会使用相同的实例。

由于在 Angular 应用程序中使用相同的 $stateProvider 实例，因此为子模块定义单独的状态非常好。

这是代码维护的好习惯。

我在很多项目中都使用过它

【讨论】：