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="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
			}
		}

到此，国际化文件就可以在整个项目中活起来了。