Angular国际化

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

<!-- i18n -->
<script src="modules/mainframe/media/js/angular-translate.min.js"></script>
<script src="modules/mainframe/media/js/angular-translate-loader-static-files.min.js"></script><--! 用来读取本地文件的模块 --!>

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中的配置

 <div class="row-fluid" ng-controller="i18nController">
    <div class="span12">
        <div class="portlet box grey">
            <div class="portlet-title">
                <div class="caption"><i class="icon-user"></i>i18n</div>
            </div>
            <div class="portlet-body">
                <div class="clearfix">
                    <div class="btn-group" ng-click="changeLanguage('cn')">

                        <button id="sample_editable_1_new" class="btn green">

                        <i class="icon-pencil"></i>&nbsp;{{ 'BUTTON_LANG_CN' | translate }}

                        </button>
                    </div>
                    <div class="btn-group" ng-click="changeLanguage('en')">

                        <button id="sample_editable_1_new" class="btn blue">

                        <i class="icon-pencil"></i>&nbsp;{{ 'BUTTON_LANG_EN' | translate }} 
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="portlet-body">
              <p>{{ 'HEADLINE' | translate }}</p>
              <p>{{ 'PARAGRAPH' | translate }}</p>
              <p translate>PASSED_AS_TEXT</p>
              <p translate="PASSED_AS_ATTRIBUTE"></p>
              <p translate>{{ 'PASSED_AS_INTERPOLATION' }}</p>
              <p translate="{{ 'PASSED_AS_INTERPOLATION' }}"></p>
              <p translate="VARIABLE_REPLACEMENT" translate-values="{ name: 'PascalPrecht' }"></p>
              <!-- <button ng-click="changeLanguage('cn')" translate="BUTTON_LANG_CN"></button> -->
        </div>
    </div>
</div>


//注入$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