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();
}])
在这里我们需要注入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', 'wizardService','$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="f
4000
ont-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
}
}
到此，国际化文件就可以在整个项目中活起来了。