AngularJS ui-router:如何全局解析所有路由的典型数据？

Question

我有一个AngularJS服务,它与服务器通信并返回应用程序不同部分的翻译:

angular
     .module('utils')
     .service('Translations', ['$q','$http',function($q, $http) {
        translationsService = {
            get: function(section) {
                if (!promise) {
                    var q = $q.defer();
                    promise = $http
                            .get(
                                '/api/translations',
                                {
                                    section: section
                                })
                            .success(function(data,status,headers,config) {
                                q.resolve(result.data);
                            })
                            .error(function(data,status,headers,config){ 
                                q.reject(status);
                            });
                    return q.promise;
                }
            }
        };

        return translationsService;
    }]);

节的名称作为函数的section参数传递get.

我正在使用AngularJS ui-router模块并遵循此处描述的设计模式

所以我有以下状态配置:

angular.module('app')
    .config(['$stateProvider', function($stateProvider) {
    $stateProvider
    .state('users', {
        url: '/users',
        resolve: {
            translations: ['Translations',
                function(Translations) {
                    return Translations.get('users');
                }
            ]            
        },
        templateUrl: '/app/users/list.html',
        controller: 'usersController',
        controllerAs: 'vm'
    })
    .state('shifts', {
        url: '/shifts',
        resolve: {
            translations: ['Translations',
                function(Translations) {
                    return Translations.get('shifts');
                }
            ]            
        },
        templateUrl: '/app/shifts/list.html',
        controller: 'shiftsController',
        controllerAs: 'vm'
    })

这工作正常,但您可能会注意到我必须translations在resolve参数中明确指定.我认为这不够好,因为这复制了逻辑.

有没有办法全局解决翻译并避免代码重复.我的意思是某种中间件.

我正在考虑收听$stateChangeStart,然后获取特定于新状态的翻译并将它们绑定到控制器,但我还没有找到实现它的方法.

任何建议将受到很大的赞赏.

重要说明:在我的情况下,已解决的translations object必须包含翻译数据,而不是服务/工厂/其他.

亲切的问候.

Answer 1

让我告诉你我的方法.有一个工作的plunker

我们有translation.json这样的:

{
  "home" : "trans for home",
  "parent" : "trans for parent",
  "parent.child" : "trans for child"
}

现在,让我们介绍超级母国 root

$stateProvider
  .state('root', {
    abstract: true,
    template: '<div ui-view=""></div>',
    resolve: ['Translations'
      , function(Translations){return Translations.loadAll();}]
  });

这个超级根状态没有任何url (不影响任何子URL).现在,我们将默默地将其注入每个州:

$stateProvider
  .state('home', {
      parent: 'root',
      url: "/home",
      templateUrl: 'tpl.html',
  })
  .state('parent', {
      parent: 'root',
      url: "/parent",
      templateUrl: 'tpl.html',
  })

我们可以看到,我们使用设置parent- 并且不影响/扩展原始状态名称.

根状态通过新方法一次加载翻译loadAll():

.service('Translations', ['$http'
    ,function($http) {
    translationsService = {
      data : {},
      loadAll : function(){
        return $http
          .get("translations.json")  
          .then(function(response){
            this.data = response.data;    
            return this.data;
          })
      },
      get: function(section) {
        return data[section];
      }
    };

    return translationsService;
}])

我们根本不需要$q.我们的超级根状态只是解决了一次......通过$http和loadAll()方法.所有这些现在都已加载,我们甚至可以将该服务放入$rootScope:

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

我们可以访问它,就像这样:

<h5>Translation</h5>
<pre>{{Translations.get($state.current.name) | json}}</pre>

哇......这个解决方案几乎可以从UI-Router附带的每个功能中获利......我会说.全部加载一次.全部由于$ rootScope和视图继承而继承...所有子状态都可用...

检查所有这里.

Answer 2

虽然这是一个非常古老的问题,但我想发布我现在正在使用的解决方案.希望它能帮助将来的某个人.在使用了一些不同的方法之后,我想出了John Papa的一个漂亮的angularjs模式

他建议使用特殊服务routerHelperProvider并将状态配置为常规JS对象.我不会在这里复制粘贴整个提供程序.请参阅上面的链接了解详情.但是我将展示如何通过该服务解决我的问题.

以下是该提供程序的代码部分,它接受JS对象并将其转换为状态配置:

function configureStates(states, otherwisePath) {
    states.forEach(function(state) {
        $stateProvider.state(state.state, state.config);
});

我把它改成如下:

function configureStates(states, otherwisePath) {

    states.forEach(function(state) {

        var resolveAlways = {

            translations: ['Translations', function(Translations) {

                if (state.translationCategory) {

                    return Translations.get(state.translationCategory);

                } else {

                    return {};

                }

            }],

        };  



        state.config.resolve =

            angular.extend(state.config.resolve || {}, resolveAlways || {});



        $stateProvider.state(state.state, state.config);

    }); 

}); 

我的路由配置对象现在看起来如下:

        {
            state: ‘users’,
            translationsCategory: ‘users’,
            config: {
                controller: ‘usersController’
                controllerAs: ‘vm’,
                url: ‘/users’.
                templateUrl: ‘users.html'
            }

所以我做了什么:

我实现了resolveAlways获取自定义translationsCategory属性的对象,注入Translations服务并解析必要的数据.现在不需要每次都这样做.