通过angular-translate来实现国际化

通过angular-translate来实现国际化

1.安装插件

bower install angular-translate
bower install angular-translate-loader-static-files

2.添加依赖

var app = angular.module('myApp', ['pascalprecht.translate']);

3.配置插件

.config(function($translateProvider){
      //使用静态资源实现国际化
      $translateProvider.useStaticFilesLoader({
          files: [{
            prefix: 'json/locale-',//静态资源文件的前缀
            suffix: '.json'        //静态资源文件的后缀
           }]
      });
      //在这里添加所支持的语种
      $translateProvider.registerAvailableLanguageKeys(['en', 'zh'], {
         'en_US': 'en',
         'zh_CN': 'zh'
      }); 
      //设置默认语言
      // $translateProvider.preferredLanguage('zh');
      //跟随系统设置语言
      $translateProvider.determinePreferredLanguage();
      //当不能使用系统语言时 选择该语言
      $translateProvider.fallbackLanguage('zh');
  })

4.资源文件

// locale-zh.json
{
    "test": {
       "title": "angular-translate",
       "subtitle": "Angular应用的国际化工具。"
    },
    "content": {
       "firstline": "这是第一行。",
       "secondline": "这是第二行。",
       "hello": "你好 {{name}} ！！！" 
    },
    "BUTTON_LANG_ZH": "中文",
    "BUTTON_LANG_EN": "英文"    
}

// locale-en.json
{
    "test": {
       "title": "angular-translate",
       "subtitle": "i18n in your Angular apps, made easy."
    },
    "content": {
       "firstline": "This is the first line.",
       "secondline": "This is the second line.",
       "hello": "hello {{name}} !!!"  
    },
    "BUTTON_LANG_ZH": "Chinese",
    "BUTTON_LANG_EN": "English"    
}

5.更换语言

$scope.language= function(){
      $translate.use("en"); //选择所需要的语言
}