Angular 翻译 - 获取翻译 Table
Angular Translate - Get Translation Table
我正在尝试将 angular-translate 模块集成到我的应用程序中。
我的异步加载器可以正常工作,它可以正确加载我的语言翻译。
但是,我 运行 遇到的问题是我们的后端是基于 Struts 1. 我们有一个模板包含在每个页面加载中而不是正文内容中像在单页应用程序中一样被换出。这个模板是我们使用 angular.module
和所有依赖项实例化 angular 应用程序的地方。实例化后,我设置翻译提供程序:
myApp.config(['$translateProvider', function($translateProvider){
$translateProvider.useUrlLoader('url/to/my/load/action.do');
$translateProvider.determinePreferredLanguage();
}]);
因为这个模板包含在每次页面加载中,因此 angular 应用程序会在每次页面加载后再次实例化,翻译提供者会在每次页面加载时执行我的操作以获取翻译。
这对后端来说不会是一个巨大的负载,因为我已经实现了缓存,但是问题是每个页面上都闪烁着未翻译的内容。
我提出的方案如下:
有一个控制器可以捕获 angular 翻译触发的 $translateLoadingEnd
事件,并将翻译 table 放入具有一定过期时间的 cookie 中
myApp.controller('TranslationController', function($scope, $rootScope){
$rootScope.$on('$translateLoadingEnd',function(event) {
// Get the translation table and put it in a cookie
});
});
在配置中,如果cookie不存在或已过期,我只会设置$translateProvider.useUrlLoader('url/to/my/load/action.do');
。为此,我必须通过使用类似以下 (how to use cookiesProvider in angular config) 的内容将 cookie 服务注入配置并获取翻译 table:
来获取 cookie
var $cookies;
angular.injector(['ngCookies']).invoke(function(_$cookies_) {
$cookies = _$cookies_;
});
我的问题 是否有办法获得给定语言的翻译 table 以便我可以将其放入 cookie 中。我已经仔细研究了该模块的源代码,但我唯一发现的只是一个本地函数,并没有公开供我使用。
也欢迎对我解决这个问题的方法提出意见和建议。
我决定以更优雅的方式解决这个问题。我没有使用 useUrlLoader
函数,而是使用了自定义加载程序。
$translateProvider.useLoader("translationFactory");
myApp.factory("translationFactory", function($q, $resource, localStorageService) {
var GetTranslationsResource = $resource(baseHref + 'url/to/my/load/actiongetTranslations.do', {}, {});
return function(options) {
var deferred = $q.defer();
var currentTime = new Date().getTime();
var twelveHours = 12 * 60 * 60 * 1000;
var translationStorage = localStorageService.get("translationStorage");
if(translationStorage && translationStorage.expiration + twelveHours > currentTime && translationStorage.translations[options.key]) { // Have local storage, it hasn't been 12 hours yet, and we have translations for this language
setTimeout(function() { // Need a timeout so that the promise returns first
return deferred.resolve(translationStorage.translations[options.key]);
}, 500);
} else {
GetTranslationsResource.get({"lang" : options.key}, function(result) {
switch(result.status){
case 'success':
var newTranslationStorage = {
expiration : currentTime,
translations : {}
};
newTranslationStorage.translations[options.key] = result.data;
localStorageService.set("translationStorage", newTranslationStorage);
return deferred.resolve(result.data);
break;
case 'error': deferred.reject(options.key); break;
case 'logout': hideLoader(); ajaxLogout(); break;
}
}, function(){
return deferred.reject(options.key);
});
}
return deferred.promise;
};
});
我正在尝试将 angular-translate 模块集成到我的应用程序中。
我的异步加载器可以正常工作,它可以正确加载我的语言翻译。
但是,我 运行 遇到的问题是我们的后端是基于 Struts 1. 我们有一个模板包含在每个页面加载中而不是正文内容中像在单页应用程序中一样被换出。这个模板是我们使用 angular.module
和所有依赖项实例化 angular 应用程序的地方。实例化后,我设置翻译提供程序:
myApp.config(['$translateProvider', function($translateProvider){
$translateProvider.useUrlLoader('url/to/my/load/action.do');
$translateProvider.determinePreferredLanguage();
}]);
因为这个模板包含在每次页面加载中,因此 angular 应用程序会在每次页面加载后再次实例化,翻译提供者会在每次页面加载时执行我的操作以获取翻译。
这对后端来说不会是一个巨大的负载,因为我已经实现了缓存,但是问题是每个页面上都闪烁着未翻译的内容。
我提出的方案如下:
有一个控制器可以捕获 angular 翻译触发的
$translateLoadingEnd
事件,并将翻译 table 放入具有一定过期时间的 cookie 中myApp.controller('TranslationController', function($scope, $rootScope){ $rootScope.$on('$translateLoadingEnd',function(event) { // Get the translation table and put it in a cookie }); });
在配置中,如果cookie不存在或已过期,我只会设置
来获取 cookie$translateProvider.useUrlLoader('url/to/my/load/action.do');
。为此,我必须通过使用类似以下 (how to use cookiesProvider in angular config) 的内容将 cookie 服务注入配置并获取翻译 table:var $cookies; angular.injector(['ngCookies']).invoke(function(_$cookies_) { $cookies = _$cookies_; });
我的问题 是否有办法获得给定语言的翻译 table 以便我可以将其放入 cookie 中。我已经仔细研究了该模块的源代码,但我唯一发现的只是一个本地函数,并没有公开供我使用。
也欢迎对我解决这个问题的方法提出意见和建议。
我决定以更优雅的方式解决这个问题。我没有使用 useUrlLoader
函数,而是使用了自定义加载程序。
$translateProvider.useLoader("translationFactory");
myApp.factory("translationFactory", function($q, $resource, localStorageService) {
var GetTranslationsResource = $resource(baseHref + 'url/to/my/load/actiongetTranslations.do', {}, {});
return function(options) {
var deferred = $q.defer();
var currentTime = new Date().getTime();
var twelveHours = 12 * 60 * 60 * 1000;
var translationStorage = localStorageService.get("translationStorage");
if(translationStorage && translationStorage.expiration + twelveHours > currentTime && translationStorage.translations[options.key]) { // Have local storage, it hasn't been 12 hours yet, and we have translations for this language
setTimeout(function() { // Need a timeout so that the promise returns first
return deferred.resolve(translationStorage.translations[options.key]);
}, 500);
} else {
GetTranslationsResource.get({"lang" : options.key}, function(result) {
switch(result.status){
case 'success':
var newTranslationStorage = {
expiration : currentTime,
translations : {}
};
newTranslationStorage.translations[options.key] = result.data;
localStorageService.set("translationStorage", newTranslationStorage);
return deferred.resolve(result.data);
break;
case 'error': deferred.reject(options.key); break;
case 'logout': hideLoader(); ajaxLogout(); break;
}
}, function(){
return deferred.reject(options.key);
});
}
return deferred.promise;
};
});