angularjs实现国际化
随着技术的发展，越来越多的项目需要适应市场需求，拓展海外市场必不可少的就是支持多国语言，庆幸的是angularjs提供了实现国际化的功能，那么就让我们来看看angularjs是如何实现国家化的呢？
1.angularjs实现国家化原理
这张展示图是借用别人的。从上面的图中可以看出，本质上国际化也是一种filter，通过filter过滤器来实现的，
通过一种管道
来解析成不同的json对应的语言，在使用时依赖于$translate注入器，并指向引用的静态json文件及其
路径。同时angularjs也给提供了一种用于存储国家化方案的LocalStorage和cookieStorage，以便我们在不同的
应用中来使用设定好的国际化文件。关于filter，大家可以关注我的另外一篇关于angularjs的filter功能。
下面就根据我在项目中碰到的问题跟大家讲述一下angularjs的国际化使用方式。
2.angularjs国家化使用
介绍一下我们项目的需求，由于前期将登陆和主页面作为两个单独的APP应用，所以在APP之间的值传递还是
需要借助于cookieStorage来实现跨应用的国际化之间的传递。首先登录的用户可以在登录页面选择不同的国际化语言
（不同的国家会支持不同的语言）。比如用户切到英文模式，那么我们需要在主页面保持语言的一致性。
2.1 引入js文件
需要引入angular-translate.min.js angular-cookies.min.js以及angular.min.js等支持国际化的文件。
2.2 注入国际化
在前面我们已经讲到angularjs的注入方式，使用config方式来定义国际化，使用cookieStorage将当前使用的
国际化语言保存到cookie中。
$translateProvider.preferredLanguage('en_US');
其中en_US对应国际化文件名称，prefix定义路径前缀，suffix定义文件后缀
angular.module('login', ["ui.bootstrap",
"ui.router",
"pascalprecht.translate",
"ngCookies",
"toastr"
])
.config(['$translateProvider', function($translateProvider){
//international json file path in nginx
$translateProvider.useStaticFilesLoader({
prefix: '/static/data/',
suffix: '.json'
});
$translateProvider.preferredLanguage('en_US');
$translateProvider.useCookieStorage();
}])2.3 国际化文件使用
上面讲到我们需要在APP中注入translate和cookie来使用和存储我们的国际化，这APP中注入之后，我们整个页面的使用及其作用域的定义始终是以controller为定义来实现其作用范围，所以我们需要在controller中注入$translate。
angular.module('login')
.run(['$rootScope','$location','wizardService',function($rootScope,$location,wizardService) {
// lock screen initialization
}])
.controller("loginCtrl", ['$translate', '$http', '$scope', '$interval', '$modal', 'toastr', 'wizardService','$cookieStore','$timeout',
function($translate, $http, $scope, $interval, $modal, toastr, wizardService,$cookieStore,$timeout) {
}]);controller中注入$translate和$cookieStore，使用的Demo如下图，我想要实现的结果是选择其中一种语言，就会翻译成对应的国际化语言，页面默认使用的是English。
中文界面：
韩语：
等其他版本。现在需要一个切换功能：
当我切换成不同语言的时候会去调用某个方法，在该方法中去处理josn文件
$scope.setLang = function(langKeyNum) {
var langKey = "en_US";
switch (langKeyNum) {
case 0:
langKey = "en_US";
$cookieStore.put("lang", "en");
break;
case 1:
langKey = "zh_CH";
$cookieStore.put("lang", "zh");
break;
case 2:
langKey = "de_DE";
$cookieStore.put("lang", "de");
break;
case 3:
langKey = "fr_FR";
$cookieStore.put("lang", "fr");
break;
case 4:
langKey = "es_ES";
$cookieStore.put("lang", "es");
break;
case 5:
langKey = "tr_TR";
$cookieStore.put("lang", "tr");
break;
case 6:
langKey = "kr_KR";
$cookieStore.put("lang", "kr");
break;
case 7:
langKey = "it_IT";
$cookieStore.put("lang", "it");
break;
case 8:
$interval.cancel($scope.langInterval);
langKey = "en_US";
break;
}
$translate.use(langKey);
};$cookieStore.put("lang", "it");$translate.use(langKey);切换到指定语言之后，跳转到其他应用的时候，国际化的引用注入方式跟登录页的是一样的，这个不能在登录页面定义了就在其他页面buy9ong定义了，APP之间是不共享config的，所以需要在主页面中同样配置一下。配置这里就不在列出了。只是在加载主页面的时候，在controller中初始化调用一下就行了。
getLang();
function getLang (){
if($cookieStore.get("lang") == null||$cookieStore.get("lang") == "en"){
$translate.use("en_US");
}else if($cookieStore.get("lang") == "zh"){
$translate.use("zh_CH");
}else if($cookieStore.get("lang") == "de"){
$translate.use("de_DE");
}else{
//other language
}
}到此，国际化文件就可以在整个项目中活起来了。