由多个模块配置的Ui-router

Question

我正在做一个大的angular应用，所以我想配置每个模块的ui-router状态。我有一个主模块和2个子模块:

angular.module('app', ['app.page1', 'app.page2']).config(function($stateProvider) {
  $stateProvider.state('main', {
    abstract: true,
    template: '<ui-view>'
  });
});
angular.module('app.page1', []).config(function($stateProvider) {
  $stateProvider.state('main.page1', {});
});
angular.module('app.page2', []).config(function($stateProvider) {
  $stateProvider.state('main.page2', {})
});

// I want to go from main.page1 to main.page2, so i used 
$state.go('main.page1');
// and
$state.go('^.page1');

但是它不工作!因为我只是想分割大配置文件，我尝试了这个命题两个，但它失败了。如果有谁能把它做成，那就太好了。

Answer 1

确保将ui.router添加到您的模块依赖项中，它似乎在您的示例中缺失。

如果您想对模块进行隔离单元测试，我建议您使用$stateProvider显式地将ui.router依赖项添加到所有模块中。

Answer 2

您需要将$state添加到$rootScope中，以便它可以在任何地方访问，请尝试以下操作:

yourApp.run([ '$rootScope', '$state', '$stateParams',function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}]);

希望这对你有帮助!

Answer 3

我可以在不定义抽象状态的情况下跨模块拆分状态定义。模块1和模块2

无法正常工作，因为在注入解析函数的服务中存在未定义的变量。这就是为什么我没有得到任何堆栈跟踪，直到我添加日志到我的代码库，如@Kasper所提到的:

app.run(function($rootScope) {
  $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams, error) {
    console.log('*******************');
    console.log('event', event.name);
    console.log('toState', toState.name);
    console.log('error', error);
    console.log('************');
  });
  $rootScope.$on('$stateNotFound', function(event, toState, toParams, fromState, fromParams, error) {
    console.log('*******************');
    console.log('event', event.name);
    console.log('toState', toState.name);
    console.log('fromState', fromState.name);
    console.error('error', error);
    console.log('************');
  });
  $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
    console.log('*******************');
    console.log('event', event.name);
    console.log('toState', toState.name);
    console.log('fromState', fromState.name);
    console.error('error', error);
    console.log('************');
  });