javascript - AngularJS 用户界面路由器 : how to resolve typical data globally for all routes?

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;
    }]);

部分的名称作为 get 函数的 section 参数传递。

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

所以我有以下状态配置:

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'
    })

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

有什么方法可以解决全局翻译并避免代码重复。我的意思是某种中间件。

我正在考虑监听 $stateChangeStart，然后获取特定于新状态的翻译并将它们绑定(bind)到 Controller ，但我还没有找到实现它的方法。

任何建议将不胜感激。

重要提示:在我的例子中，已解析的 translations 对象 必须包含翻译数据，而不是 service/factory/whatever。

亲切的问候。

Answer 1

让我向您展示我的方法。那里is a working plunker

让我们有一个像这样的 translation.json:

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

现在，让我们介绍一下 super 父状态 root

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

这个 super 根状态没有任何 url (不影响任何子 url)。现在，我们将默默地将其注入(inject)每个状态:

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

如我们所见，我们使用设置 parent - 并且不影响/扩展原始状态 name。

根状态正在通过新方法 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。我们的 super 根状态只解决了一次...通过 $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 和 View 继承而全部继承...所有子状态都可用...

检查所有 here .