Deporting/moving UI 状态定义之外的路由器解析函数定义

Deporting/moving UI router's resolve functions definitions outside of the state definitions

截至目前,我已将所有州的定义放在一个 app.js 文件中。挺喜欢的,因为一眼就能看到自己的所有状态

不过,我计划向我的每个状态添加一些解析函数,如下所示。

.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
 $stateProvider
  .state('authenticated', {
                url: '/:memberType',
                abstract: true,
                template: '<ui-view />',
                resolve: {
                    memberType: ['$rootScope', '$q', function ($rootScope, $q) {
                        return $rootScope.globals.memberType || $q.reject({unAuthorized: true});
                    }],
                    currentMember: ['$rootScope', '$q', function ($rootScope, $q) {
                        return $rootScope.globals.authenticated || $q.reject({unAuthorized: true});
                    }]
                }
            })
   ...

我遇到的问题是我的解析函数会变得非常大,我的 app.js 文件会变得不成比例。

因此,我想 deport/move 我的 app.js 文件之外的解析函数定义,但将状态保留在同一个唯一文件中。这可能吗?如果有怎么办?

理想情况下,我会得到这样的结果:

.state('authenticated', {
                url: '/:memberType',
                abstract: true,
                template: '<ui-view />',
                resolve: {
                    memberType: something??,
                    currentMember: something else??
                }
            })

somethingsomething else 指向外部定义的函数定义。

有人可以帮忙或提供替代的最佳做法吗?

按照上面的评论,您可以使用服务来实现业务逻辑并在解析块中调用服务功能。这是可能的,因为解析代码不是作为配置块的一部分执行的,而是在状态更改之前执行的。您只需将服务注入解析块中的函数。

这是一个基于您的代码示例的示例:

.state('authenticated', {
            url: '/:memberType',
            abstract: true,
            template: '<ui-view />',
            resolve: {
                memberType: ['MemberService', function(MemberService) { return MemberService.getMemberType(); }],
                currentMember: ['MemberService', function(MemberService) { return MemberService.getCurrentMember(); }]
            }
        })