如何使用ui-router创建全局状态更改处理程序

时间:2015-10-07 20:18:29

标签: angularjs angular-ui-router

我正在构建我的第一个角度应用程序,许多主要功能都被分成了自己的模块。每个模块使用$ stateProvider在config中注册其路由。

我希望能够在一个地方为我的整个应用程序处理$ stateChangeStart / $ stateChangeError,这样我就可以评估授权并处理错误。我该怎么做?

目前我在我的主模块/应用程序上的$ rootScope上注册了这个处理程序,但是如果我导航到另一个模块的路由,然后导航到另一个路由则不会触发。为什么?实际上甚至是$ urlRouterProvider.otherwise(" xyz");不再有用了。

我不喜欢复制粘贴代码,因此任何避免将此逻辑放在每个模块中的解决方案都将受到赞赏。

1 个答案:

答案 0 :(得分:0)

您可以尝试以下内容:

var app = {};

// Route Config for a "some" module.
function someModuleConfig($stateProvider) {
  $stateProvider.
      state('something', {
        url: '/something',
        templateUrl: 'path/to/something/something.html',
      });
}

// Module definition for "some" module.
app.somemodule.module = angular.module('app.somemodule', []).
    config(someModuleConfig);

// Route Config for the main module.
function appConfig($stateProvider, $urlRouterProvider) {
  // Set the default redirect for any missing route.
  $urlRouterProvider.otherwise('xyz');

  $stateProvider.
      state('home', {
        url: '/',
        templateUrl: 'path/to/home/home.html'
      });
};

// Module definition for the main module.
app.module = angular.module('myapp', [
  'ui.router',
  app.somemodule.name
]).config(appConfig);

关键是您可以使用主模块注册路由,子路径可以在其他模块中注册。您也可以在主应用程序模块中注册所有路径,具体取决于您的代码结构。