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