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

mepcadol  于 11个月前  发布在  Angular
关注(0)|答案(1)|浏览(85)

到目前为止,我已经将所有状态的定义放在一个app.js文件中,我非常喜欢它,因为我可以一目了然地看到所有状态。
但是,我计划为每个状态添加一些resolve函数,如下所示。

.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??
                }
            })


其中somethingsomething else指向外部定义的函数定义。
有人能提供帮助或提供替代的最佳实践吗?

m4pnthwp

m4pnthwp1#

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

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

字符串

相关问题