Ionic App之国际化(1)单个参数的处理

最近的app开发中需要考虑多语言国际化的问题，经查资料，目前大部分使用的是angular-translate.js这个组件，网站说明是这个:https://angular-translate.github.io

具体步骤：

1.下载angular-translate.min.js和angular-translate-loader-static-files.min.js,并在index.html中添加引用

    <!--多语言模块-->
    <script src="lib/angular-translate/angular-translate.min.js"></script>
    <script src="lib/angular-translate/angular-translate-loader-static-files.min.js"></script>

2.设置依赖项

var app = angular.module("ionicApp", ["ionic","pascalprecht.translate"]);

3.配置多语言，此处是加载本地化的json文件，在www目录下建立languages目录,有两个json文件：en.json和zh.json

{
  "LOGIN_REGISTER": "Login/Register",
  "A" : "电动自行车A",
  "B" : "电动三轮车B",
  "MyLa":
  {
    "length" : 2,
   "values":[
    {
      "name" : "Huanhuan","value" : "1"
    },
    {
      "name" : "Alex","value" : "2"
    }
  ]
  }
}

{
  "LOGIN_REGISTER": "登录/注册",
  "A" : "电动自行车",
  "B" : "电动三轮车",
  "MyLa":{
    "length" : 2,
    "values":[
    {
      "name" : "郭欢欢","value" : "1"
    },
    {
      "name" : "大海","value" : "2"
    }
  ]}
}

这两个文件就是我们的多语言文件，相关内容应该日后都放在这里。

4.加载多语言文件，这个是需要提前加载的（貌似也可以延迟加载,还没研究到)

app.config(function($locationProvider,$stateProvider, $urlRouterProvider, $ionicConfigProvider, $sceDelegateProvider, $compileProvider,$translateProvider)
{
    $ionicConfigProvider.tabs.style("standard");
    $ionicConfigProvider.tabs.position("bottom");

    $ionicConfigProvider.navBar.alignTitle("center");

    $ionicConfigProvider.views.transition("ios");
    $ionicConfigProvider.views.maxCache(2);
    $ionicConfigProvider.views.swipeBackEnabled(false);

    $ionicConfigProvider.backButton.text("");
    $ionicConfigProvider.backButton.previousTitleText(false);

    $ionicConfigProvider.templates.maxPrefetch(5);
/*
       Url replace by dynamic load urls.json 2016.10.25
  */
  $urlRouterProvider.deferIntercept();
  $urlRouterProvider.otherwise('tab/home');
  $locationProvider.html5Mode({enabled: false});
  $stateProviderRef = $stateProvider;
  /*
     添加多语言设置
  */
  $translateProvider.useStaticFilesLoader({
      prefix: 'languages/',
      suffix: '.json'
  });
  $translateProvider.use('en');
})

这里的prefix，suffix和en三个参数，实际上会合成一个类似{prefix}{en}{suffix}的字符串，即languages/en.json,也就是我们的多语言文件地址

5.使用指令实现翻译效果，比如我们在view中有如下一段代码，LOGIN_REGISTER实现不同语言下的显示。

          <div class="sign" ng-if=!$root.user>
              <a href="#/login/">
                <h2 translate>LOGIN_REGISTER</h2>
              </a>
          </div>

由于我们在第4步中默认使用的是英文en,所以第一次启动的时候对应的内容是en.json中LOGIN_REGISTER对应的值"Login/Register"

6.语言的切换，我们设置两个按钮事件，对应中文/英文的切换

$scope.chinese= function()
              {
                $translate.use("zh");
              };

$scope.english= function()
              {
                $translate.use("en");
              };

每点击下中文按钮，LOGIN_REGISTER就即刻变为zh.json中对应的 "登录/注册"，点下英文按钮，则写换到"Login/Register"

 

这样我们基本完成了单个值的多语言的实现.