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 路由器的下面加入一下代码

 1  $translateProvider.translations('en', {
 2     TITLE: 'Hello',
 3     FOO: 'This is a paragraph.',
 4     BUTTON_LANG_EN: 'english',
 5     BUTTON_LANG_DE: 'german',
 6 
 7     // 左边菜单
 8     mainside:'mainpage',
 9     aboutusside:'About Us',
10     settingside:'Setting',
11     tncside:'T&C',
12     // 登录页面
13     login_info:'login',
14     login_sub:'login',
15     login_register:'register',
16     login_forgetpsw:'forget password',
17     login_placeholderemail:'email',
18     login_placeholderpassword:'password',
19     // 注册页面
20     register_info:'register',
21     register_sub:'register'
22   });
23   $translateProvider.translations('zh', {
24     TITLE: 'Hallo',
25     FOO: 'Dies ist ein Paragraph.',
26     BUTTON_LANG_EN: 'englisch',
27     BUTTON_LANG_DE: 'deutsch',
28     mainside:'主页面',
29     aboutusside:'关于我们',
30     settingside:'设置',
31     tncside:'条款',
32      // 登录页面
33     login_info:'登录',
34     login_sub:'登录',
35     login_register:'注册',
36     login_forgetpsw:'忘记密码',
37     login_placeholderemail:'电邮',
38     login_placeholderpassword:'密码',
39         // 注册页面
40     register_info:'注册',
41     register_sub:'注册'
42   });
43   $translateProvider.preferredLanguage('en');

View Code

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

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

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

View Code

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

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

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

posted on 2014-09-19 10:33 ทดสอบ 阅读(419) 评论(0) 收藏举报