Question

截至目前，我已将所有州的定义放在单个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文件会不成比例地增长。

因此，我希望将解析函数定义逐出/移出app.js文件，但将状态保存在同一个唯一文件中。这可能吗？如果是这样的话？

理想情况下我最终会得到这样的结果：

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

something和something else指向外部定义的函数定义。

有人可以帮助或提供其他最佳做法吗？

Answer 1

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

以下是一个示例，基于您的代码示例：

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

在状态定义之外驱逐/移动UI路由器的解析函数定义

1 个答案: