Question

以下是该方案：

我有一个主要的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()，所以我想知道这样做的正确方法是让父应用程序处理路由，并让当我定义每个组件/指令时，迷你app处理模板。然后，当我想自己加载迷你应用程序时，我会写一个带有新路由的包装器AngularJS模块。

Answer 1

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

在一个角度应用程序中，提供程序加载一次然后angular将实例放入缓存中，以便下次将提供程序注入某处时，则使用相同的实例。

因为$ stateProvider的相同实例用于角度应用程序，所以为子模块定义单独的状态是完全正确的。

这是代码维护的好习惯。

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

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

1 个答案: