使用angular-translate插件进行项目国际化

angular-translate是一款非常便捷的I18N国际化插件，那么在我们的项目中怎么使用这款插件呢，首先项目中必须已经引入了angular，这里不再介绍，下面具体介绍如何使用translate插件；

---

安装

使用bower进行插件安装，这里需要安装两个分别为：
bower install angular-translate
bower install angular-translate-loader-static-files

1. angular-translate.min.js 是angular官方提供的国际化模块;
2. angular-translate-loader-static-files.min.js 是用来读取本地文件的模块,

操作执行完成后，我们可以在项目的bower_components文件下分别找到对应的两个文件夹，还需要在bower.json中添加对应的依赖项，，这里版本前面的符号^表示兼容到此版本,~表示接近此版本；

到这里插件就安装完成了，那么如何使用？在项目目录下添加/i18n/文件夹，文件夹中添加对应语言的json文件，我们这里添加en.json、ch.json，两个json文件对应相同的key值（翻译键），然后在index.module中添加服务配置

export default angular.module('myApp', [
        'pascalprecht.translate',
    ])
    .config(function ($translateProvider) {
        let lang;
        if (window.localStorage.lang === undefined || window.localStorage.lang === 'undefined') {
            lang = 'en'
        } else {
            lang = window.localStorage.lang;
        }
        $translateProvider.preferredLanguage(lang);
        $translateProvider.useStaticFilesLoader({
            prefix: 'src/app/i18n/',
            suffix: '.json'
        });
    });

首先注入‘pascalprecht.translate’，然后添加配置项，window.localStorage.lang获取缓存语言，如果没有设置为English，translateProvider.preferredLanguage(lang)告诉 angular.js 哪种语言是默认已注册的语言，$translateProvider.useStaticFilesLoader用于读取本地json文件，prefix代表文件的路径前缀，suffix代表文件后缀，

• 如果用户上次访问了中文站, window.localStorage.lang=ch，加载 /i18n/ch.json 文件
• 如果用户第一次访问, window.localStorage.lang=undefined ,默认加载 /i18n/en.json 文件

页面添加下拉框可以进行语言选择

<md-select aria-label="Selector for language" class="md-no-underline language-switching md-icon-earth" ng-model="$ctrl.cur_lang" md-on-close="$ctrl.switching($ctrl.cur_lang)">
<md-option ng-value="::$ctrl.en">English</md-option>
<md-option ng-value="::$ctrl.ch">简体中文</md-option>
            </md-select>

构造器中添加：
 this.en = "en";
 this.ch = "ch";
 this.cur_lang = this._translate.use();

方法：
  switching(lang) {
        this._translate.use(lang);//使用当前选中的语言
        this._window.localStorage.lang = lang;//将当前选中语言存入缓存中
        this._window.location.reload();//界面刷新

        this.cur_lang = this._translate.use();//界面显示当前选中语言
    }

添加过滤器：

.filter('I18N', ['$translate', function ($translate) {
    return function (key) {
      if (key) {
        return $translate.instant(key);
      }
    }
  }])

添加服务：

.factory('I18N', ['$translate', function($translate) {
    var T = {
        T:function(key) {
            if(key){
                return $translate.instant(key);
            }
            return key;
        }
    }
    return T;
}]);

controller中添加：
.controller('ctrl', ['$scope','I18N',
    function($scope,I18N) {    
        $scope.name=I18N.T("name");
    }
]);

基本配置就已经完成了，国际化分为两部分，页面html及js部分；
1.页面部分直接使用过滤器即可：
例

{{“Create”| I18N}}

2.JS部分，这里我直接注入$translate服务直接进行国际化转换，
例

this._translate = $translate;
this._translate.instant(key);

到这里国际化就基本完成了~~