我有一个与服务器通信并返回的 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 路由器模块并遵循此处描述的设计模式
所以我有以下状态配置:
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
,然后获取特定于新状态的翻译并将它们绑定到控制器,但我还没有找到这样做的方法。
任何建议将不胜感激。
重要提示:就我而言,解析translations object
必须包含翻译数据,而不是服务/工厂/其他任何内容。
亲切问候。
让我告诉你我的方法。有一个工作弹道
机让我们有一个这样的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路由器附带的每个功能中获利...我会说。全部加载一次。都是因为$rootScope和视图继承而继承的...全部可在任何子状态中使用...
在这里检查所有内容。
虽然这是一个非常古老的问题,但我想发布我现在正在使用的解决方案。希望它将来能帮助某人。在使用了一些不同的方法后,我想出了一个漂亮的 angularjs 模式,由 John Papa 设计
他建议使用特殊的服务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
服务并解析必要的数据。现在无需每次都这样做。