很多web服务面对的不仅仅是当地用户，多语言环境不仅能提升逼格，更重要是一种用户体验。
angularJS作为前后端拆分的解决方案之一，当然离不开前端框架处理国际化的问题，angularJS官方出了一个模块angular-translate来解决多语言国际化问题。

官方网站 / GitHub / Docs

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

<script type="text/javascript" src="yourpath/angular.min.js"></script>
<script type="text/javascript" src="yourpath/angular-translate.min.js"></script>
<script type="text/javascript" src="yourpath/angular-translate-loader-static-files.min.js"></script>

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