angularjs 实现国际化

项目国际化已经成为现在开发中的一个不可或缺的部分应公司要求实现国际化，尤其适用了angularjs来实现国际化，话不多说直接看操作

1，配置国际化

1.1 引入js文件

我们都知道要使用第三方库文件，就必须要引入一些文件，比如样式文件，js文件，要实现国际化需要引入angularjs的几个文件

<span style="white-space:pre"></span><script type="text/javascript" src="resources/angular/angular.min.js"></script>

<script type="text/javascript" src="resources/angular/angular-cookies.min.js"></script>
<script type="text/javascript" src="resources/angular/angular-translate.min.js"></script>
<script type="text/javascript" src="resources/angular/translate-service/storage-cookie.js"></script>
<script type="text/javascript" src="resources/angular/translate-service/loader-static-files.js"></script>

关于translate的几个文件都需要引入，引入angularjs-cookie的作用是，当用户切换了语言，刷新之后，会显示用户操作的语言

1.2 注册配置国际化

引入js文件之后，需要在app中注册一下,在controller中注册$translate

angular.module('main', [
"pascalprecht.translate",
"ngCookies"
])

.config(['$translateProvider', function($translateProvider){

//json文件路径
$translateProvider.useStaticFilesLoader({
prefix: '/programe/hanlet/statices/data/',
suffix: '.json'
});
//默认使用英文
$translateProvider.preferredLanguage('en_US');
//保存到cookie中
$translateProvider.useCookieStorage();
}])<pre name="code" class="html">.controller("loginCtrl", function($translate) {
        //国际化
        $scope.setLang = function(langKey) {
            $translate.use(langKey);
        };    



    });

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre code_snippet_id="1693633" snippet_file_name="blog_20160523_3_5069568" name="code" class="javascript">//注册之后，在data文件下创建中英文json文件，格式如下：按键值对书写

<span style="font-family: Arial, Helvetica, sans-serif;">{</span>

    "User Guide":"User Guide"


}

<pre name="code" class="plain">{       "User Guide":"用户指导"}

在html中使用translate：

<h3 class="modal-title">{{"User Guide"|translate}}</h3>

2，切换语言事件

定义切换事件： html中：

<a href="#" ng-click="setLang('en_US')">English</a> | <a href="#" ng-click="setLang('zh_CH')">中</a>

js中：

//切换中英文
$scope.setLang = function(langKey) {
$translate.use(langKey);
};

以上就是angularjs实现国际化操作