Angular国际化

正如官方API中所说i18n for your Angular apps, made easy,angular-translate.js使用起来确实简单方便，自己动手尝试了一下，几步搞定项目国际化。
1、下载angular-translate.js, 并引入。

<--! 用来读取本地文件的模块 --!>

2、独立的文件夹 i18n 用来放语言包json 文件,目录及文件如下层级关系:
/i18n/
en.json
cn.json

//cn.json内容
{
  "HEADLINE": "神奇的模块",
  "PARAGRAPH": "这是段落!",
  "PASSED_AS_TEXT": "欢迎来中国",
  "PASSED_AS_ATTRIBUTE": "今天天气不错",
  "PASSED_AS_INTERPOLATION": "开始",
  "VARIABLE_REPLACEMENT": "你好PascalPrecht",
  "BUTTON_LANG_CN": "中文",
  "BUTTON_LANG_EN": "英语"
}
//en.json内容
{
  "HEADLINE": "What an awesome module!",
  "PARAGRAPH": "This is a paragragh!",
  "PASSED_AS_TEXT": "Welcome to China!",
  "PASSED_AS_ATTRIBUTE": "It's a nice day",
  "PASSED_AS_INTERPOLATION": "Start",
  "VARIABLE_REPLACEMENT": "Hi {{name}}",
  "BUTTON_LANG_CN": "Chinese",
  "BUTTON_LANG_EN": "English"
}

3、注入依赖

var app = angular.module('mainFrame', ['pascalprecht.translate']);
//国际化配置********* begin ***********
app.config(['$translateProvider',function($translateProvider){
  //默认加载的语言包
  //使用了 localStorage.lang来存储用户上一次选择的语言,如果用户是第一次范围,默认显示中文
  var lang = window.localStorage.lang||'cn';
  $translateProvider.preferredLanguage(lang);
  $translateProvider.useStaticFilesLoader({
    files: [{
      prefix: './modules/mainframe/media/js/i18n/',//语言包路径
      suffix: '.json'   //语言包后缀名
    }]
  });
}]);
//国际化配置*********** end **********//

4、controller中的配置

 

    

        

            

                
i18n
            
            

                

                    


                        

                         {{ 'BUTTON_LANG_CN' | translate }}

                        
                    
                    


                        

                         {{ 'BUTTON_LANG_EN' | translate }} 
                        
                    
                
            
        
        

              
{{ 'HEADLINE' | translate }}
              
{{ 'PARAGRAPH' | translate }}
              
PASSED_AS_TEXT
              

              
{{ 'PASSED_AS_INTERPOLATION' }}
              

              

              
        
    



//注入$translate， 注入T服务处理js中国际化信息
app.register.controller('i18nController', function($scope, $translate, T) {
//手动切换语言
$scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };
  //测试js
  console.log(T.T("HEADLINE"))
});

这里为了处理js中的国际化信息添加了一个方法：

//添加service 对js中内容进行国际化
app.factory('T', ['$translate', function($translate) {
    var T = {
        T:function(key) {
            if(key){
                //传入key 调用instant方法转换
                return $translate.instant(key);
            }
            return key;
        }
    }
    return T;
}]);

最后效果如图：

切换浏览器语言或者手动点击切换语言按钮到中文：

//Done