随着技术的发展，越来越多的项目需要适应市场需求，拓展海外市场必不可少的就是支持多国语言，庆幸的是angularjs提供了实现国际化的功能，那么就让我们来看看angularjs是如何实现国家化的呢？
1.angularjs实现国家化原理
这张展示图是借用别人的。从上面的图中可以看出，本质上国际化也是一种filter，通过filter过滤器来实现的，
通过一种管道
来解析成不同的json对应的语言，在使用时依赖于$translate注入器，并指向引用的静态json文件及其
路径。同时angularjs也给提供了一种用于存储国家化方案的LocalStorage和cookieStorage，以便我们在不同的
下面就根据我在项目中碰到的问题跟大家讲述一下angularjs的国际化使用方式。
2.angularjs国家化使用
介绍一下我们项目的需求，由于前期将登陆和主页面作为两个单独的APP应用，所以在APP之间的值传递还是
2.1 引入js文件
2.2 注入国际化
在前面我们已经讲到angularjs的注入方式，使用config方式来定义国际化，使用cookieStorage将当前使用的
国际化语言保存到cookie中。
$translateProvider.preferredLanguage('en_US');
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();
}])
在
这里我们需要注入angularjs国际化所依赖的translate和ngCookie,以便我们在后期使用时来实现国家化。
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','$cookieStore','$timeout',function($translate,$http,$scope,$interval,$modal,toastr,wizardService,$cookieStore,$timeout) {
}]);
controller中注入$translate和$cookieStore，使用的Demo如下图，我想要实现的结果是选择其中一种语言，就会翻译成对应的国际化语言，页面默认使用的是English。
中文界面：
韩语：
等其他版本。现在需要一个切换功能：
<div class="language_CH_EN col-lg-offset-8"> <span ng-show="isEnglish" style="font-size: 20px;"> <a href="#" ng-click="setLang(0)">English</a> </span> <span ng-show="isChiness" style="font-size: 20px;"> <a href="#" ng-click="setLang(1)">中文</a> </span> <span ng-show="isDeutsch" style="font-size: 20px;"> <a href="#" ng-click="setLang(2)">Deutsch</a> </span> <span ng-show="isFranch" style="font-size: 20px;"> <a href="#" ng-click="setLang(3)">Français</a> </span> <span ng-show="isSpanish" style="font-size: 20px;"> <a href="#" ng-click="setLang(4)">Español</a> </span> <span ng-show="isTurkish" style="font-size: 20px;"> <a href="#" ng-click="setLang(5)">Türkçe</a> </span> <span ng-show="isKorean" style="font-size: 20px;"> <a href="#" ng-click="setLang(6)">한국어</a> </span> <span ng-show="isItalian" style="font-size: 20px;"> <a href="#" ng-click="setLang(7)">Italiano</a> </span> <span ng-show="isBoth" style="font-size: 20px;"> <a href="#" ng-click="setLang(8)">English</a> | <a href="#" ng-click="setLang(9)">中文</a> | <a href="#" ng-click="setLang(10)">Deutsch</a> | <a href="#" ng-click="setLang(11)">Français</a> | <a href="#" ng-click="setLang(12)">Español</a> | <a href="#" ng-click="setLang(13)">Türkçe</a> | <a href="#" ng-click="setLang(14)">한국어</a> | <a href="#" ng-click="setLang(15)">Italiano</a> </span> </div>
当我切换成不同语言的时候会去调用某个方法，在该方法中去处理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");
将当前选择的语言使用一个简写将其保存到cookie中，以便在其他的APP中使用。
$translate.use(langKey);切换该语言，并引用对应的json国际化文件。
切换到指定语言之后，跳转到其他应用的时候，国际化的引用注入方式跟登录页的是一样的，这个不能在登录页面定义了就在其他页面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
}
}
到此，国际化文件就可以在整个项目中活起来了。
