Question

我正在处理大型角度应用程序我想为每个模块配置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');

但它不起作用！因为我只想拆分大的配置文件，我尝试了这个proposition两个，但它失败了。如果有人能够分享它，那就太好了。

Answer 1

确保将sprintf()添加到您的模块依赖项中，您的示例中似乎缺少该项。

如果您想单独测试模块，我建议您使用ui.router明确地将ui.router依赖项添加到所有模块。

Answer 2

您需要在$ rootScope中添加$ state，以便可以在任何地方访问它，试试这个：

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

希望这会对你有帮助！

Answer 3

我可以在不定义抽象状态的情况下跨模块拆分状态定义。有关示例，请参阅ng boilerplate：Module 1和Module 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('************');
  });

Ui路由器由多个模块配置

3 个答案: