ionic phonegap translate language demo

中英文转换，经常用到；而ionic  则是通过angular js 来实现；

用到了 http://www.ng-newsletter.com/posts/angular-translate.html 中的angular-translate.min.js 让translate language  变得很简单...

1. 在index.html 中引用 angular-translate.min.js

    <script src="js/angular-translate.min.js"></script>

2. 在app.js 中  .config 路由器的下面加入 一下代码

  $translateProvider.translations('en', {
     TITLE: 'Hello',
     FOO: 'This is a paragraph.',
     BUTTON_LANG_EN: 'english',
     BUTTON_LANG_DE: 'german',

     // 左边菜单
     mainside:'mainpage',
     aboutusside:'About Us',
     settingside:'Setting',
     tncside:'T&C',
     // 登录页面
     login_info:'login',
     login_sub:'login',
     login_register:'register',
     login_forgetpsw:'forget password',
     login_placeholderemail:'email',
     login_placeholderpassword:'password',
     // 注册页面
     register_info:'register',
     register_sub:'register'
   });
   $translateProvider.translations('zh', {
     TITLE: 'Hallo',
     FOO: 'Dies ist ein Paragraph.',
     BUTTON_LANG_EN: 'englisch',
     BUTTON_LANG_DE: 'deutsch',
     mainside:'主页面',
     aboutusside:'关于我们',
     settingside:'设置',
     tncside:'条款',
      // 登录页面
     login_info:'登录',
     login_sub:'登录',
     login_register:'注册',
     login_forgetpsw:'忘记密码',
     login_placeholderemail:'电邮',
     login_placeholderpassword:'密码',
         // 注册页面
     register_info:'注册',
     register_sub:'注册'
   });
   $translateProvider.preferredLanguage('en');

3. 在controllers.js 中写下页面需要控制器控制转换语言的控制， 而我则在这个页面都转换 故有了以下的代码

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout,$translate) {
  $scope.changeLanguage = function (key) {
    $translate.use(key);
  };
})

4. 就是在页面中调用 了

{{“sometext” |translate}}

4.1） 普通的标签 如下

<button class="button button-block button-positive" translate="login_sub">
      Submit
    </button>

 <p translate="login_info">login</p>

4.2）input标签中的placeholder 则是如下

 <input type="text" placeholder="{{ 'login_placeholderemail' | translate }}">

Download

// 2014-09-24 11:39:26

我发现了一个更好的方法来处理这个问题的博客

如果需要可以看这个博客 你会发现更好，更简单的方法 哈哈