html多语言国际化,angularJS插件：angular-translate实现多语言国际化

很多web服务面对的不仅仅是当地用户，多语言环境不仅能提升逼格，更重要是一种用户体验。

angularJS作为前后端拆分的解决方案之一，当然离不开前端框架处理国际化的问题，angularJS官方出了一个模块angular-translate来解决多语言国际化问题。

栗子如下，先引入必备文件

1、准备工作

我们找一个独立的文件夹i18n用来放json文件，文件夹中包含cn.json与en.json文件。

//cn.json中

{"100001":"登录","100002":"注册"}

//或者{"login":"登录","reg":"注册"}

//en.json中

{"100001":"Login","100002":"Register"}

//或者{"login":"Login","reg":"Register"}

上面2个json文件对应相同的键，我们称之为“翻译键”；不同的语言文件中，相同的翻译键对应相应的翻译值即可，如"Login"对应"登录"。

2、注入依赖及配置

var myApp = angular.module('myApp', ['pascalprecht.translate'])

.config(['$translateProvider',function($translateProvider){

var lang = window.localStorage['lang'] || 'cn';

$translateProvider

.preferredLanguage(lang)

.useStaticFilesLoader({

prefix: 'app/statics/i18n/',

suffix: '.json'

})

//sanitize escape escapeParameters

.useSanitizeValueStrategy('escapeParameters');

}])

3、创建过滤器做Html页面内容的国际化

myApp.filter("L", ['$translate', function($translate){

return function(key){

if(key){

return $translate.instant(key);

}

};

}])

使用方法：{{100001|L}}或{{'login'|L}}

4、在js脚本中使用国际化

myApp.factory('L', ['$translate', function($translate){

var L = {

L:function(key){

if(key){

return $translate.instant(key);

}

return key;

}

}

return L;

}])

使用方法：L.L(100001)或L.L('login')

上面的这种通过angular-translate-loader-static-files引入json语言包的方式在某些场景下会罢工，例如directive中，切换语言之后并不能即时更新。把所有语言都切换一遍(即所有json包都加载了)之后，恢复正常；连续刷新几次页面之后也会罢工。使用其官方的写法可解决该问题，压缩之后文件也不算太大。。。

(function(){"use strict";

angular.module('myApp')

.config(['$translateProvider', function($translateProvider){

$translateProvider.translations('en', {

"login": "Login",

"regist": "Regist",

"logout": "Logout"

});

$translateProvider.translations('zh_cn', {

"login": "登录",

"regist": "注册",

"logout": "退出"

});

$translateProvider.translations('jp', {

"login": "ログイン",

"regist": "登録",

"logout": "脱退"

});

var lang = window.localStorage['lang'] || 'en';

lang = lang.replace(/["]/g,"");

$translateProvider

.preferredLanguage(lang)

.useSanitizeValueStrategy('escapeParameters');;

}]);

})();

相关操作：

//获取当前使用语言

$scope.nowLang = $translate.use();

//切换语言

$scope.switchLang = function(str){

$translate.use(str);

storage.set('lang',str);

$window.location.reload();

};