最近在整理项目中的国际化json文件,觉得这个需要总结一下。
目前我们是用ionic做的项目,之前在网上找的方案,是直接用angular的translate服务,配了两个json文件,一个中文包,一个英文包,结果在ionic serve 的时候没问题,但是打包在手机上运行的时候却行不通,页面显示全是一堆国际化的key,简直是醉了。
百度什么的查了一下,发现这个问题是存在的,目测是ionic的bug。于是换了一种方案,如下:
(function () {
'use strict';
angular.module('service.T',[])
.factory('T', ['$translate',T]);
function T($translate) {
var T = {
T:function(key) {
if(key){
return $translate.instant(key);
}
return key;
}
}
return T;
}
})();
这是用$translate封装的一个服务,方便使用,在controller中调用的时候直接T.T(KEY),就ok。
第一步:在app.js中进行初始化:
//配置国际化(angular-translate) //$translateProvider.useSanitizeValueStrategy('sanitize');
//translate安全策略
$translateProvider.translations('ZH', testProvider.$get().providerzh);
$translateProvider.translations('EN', testProvider.$get().provideren);
$translateProvider.preferredLanguage('EN');//首选语言
$translateProvider.fallbackLanguage('EN');
第二部:在www目录下新建一个i18n的文件夹,先创建一个一个js文件,我这里命名问multilang.js,文件内容为:
angular.module('dlp.constants',[])
.provider('test', ['translationZH', 'translationEN', function (translationZH, translationEN) {
this.$get = function () {
return {
providerzh: translationZH,
provideren: translationEN
};
}
}]);
第三步:在i18n目录下创建两个js文件,分别命名为en.js和zh.js.这里以en.js为例:
angular.module('dlp.constants')
.constant('translationEN',
{
"aboutUs": {
"title": "About us",
"name": "AlphaMoney",
"version": "v1.0"
}
})
zh.js 同理
如果还想配置更多语言,请添加就可。