随着技术的发展，越来越多的项目需要适应市场需求，拓展海外市场必不可少的就是支持多国语言，庆幸的是angularjs提供了实现国际化的功能，那么就让我们来看看angularjs是如何实现国家化的呢？

1.angularjs实现国家化原理

2.angularjs国家化使用

2.1 引入js文件

2.2 注入国际化

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

2.3 国际化文件使用

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");

$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
			}
		}

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