是否可以讓AngularJS中的子模塊使用ui-router控制他們自己的路由？

這裏是場景：是否可以讓AngularJS中的子模塊使用ui-router控制他們自己的路由？

我有一個主要的AngularJS應用程序，使用ui路由器的路由，就像任何其他應用程序。我還有一個更小的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模塊。

來源

2016-08-16 elliottregan