[转]Ionic + AngularJS angular-translate 国际化本地化解决方案

本文转自:http://www.cnblogs.com/maoyazhi/p/4332362.html

欢迎访问我们的网站,网站上有更多关于技术性的交流:http://www.ncloud.hk/技术分享/ionic-plus-angularjs-angular-translate-国际化本地化解决方案/

一、手动切换语言

1.在app.js文件中首先要加上一个参数:

?

1

angular.module(’passbox’,[‘ionic’,’pascalprecht.translate’])

2.需要引用js文件

?

1

<script src=”js/angular-translate.js”></script>

3.在edit.html文件中加入点击切换按钮:

?

1

2

<buttonclass="button"ng-click="changeLanguage('en')"translate="Language_en"></button>

<buttonclass="button"ng-click="changeLanguage('zh')"translate="Language_zh"></button>

4.在controllers.js文件edit的控制器中加入切换的函数:

?

1

2

3

4

.controllers(‘edit’,[‘$scope’ ,function($scope, $translate){

  $scope.changeLanguage =function(langkey) {

    $translate.use(langkey);

  };<br>}])

5.在app.js文件中先定义变量:

?

1

2

3

4

5

6

7

8

vartranslationsEN = {

  Language_en:'english',

  Language_zh:'chinese',

};

vartranslationZH = {

  Language_en:'英文',

  Language_zh:'中文',

};

之后再写函数方法:

?

1

2

3

4

5

6

7

angular.model(‘passbox’,[‘ionic’,’pascalprecht.translate’]);

.config(function($stateProvider,$translateProvider){

  $translateProvider.translations(‘en’,translationEN);

  $translateProvider.translations(‘zh’,translationZH);

  $translateProvider.preferredLanguage(‘en’);//首选语言

  $translateProvider.fallbackLanguage(‘en’);

}

二、自动获取手机语言为默认语言

1.在app.js文件中首先要加上一个参数:

?

1

angular.module(’passbox’,[‘ionic’,’pascalprecht.translate’]);

2.需要引用js文件

?

1

2

<script src=”js/angular-translate.js”></script>

<script src=”js/angular-translate-loader-static-files.min.js”></script>

3.在app.js文件中添加参数:

?

1

2

3

4

5

6

.config(function($stateProvider,$translateProvider){

$translateProvider.registerAvailabeLanguageKeys([‘en’,’zh’],{

  ‘en-*’:’en’,

  ‘zh-*’:’zh’

});

$translateProvider.determinePreferredLanguage();//这个方法是获取手机默认语言设置

4.翻译的变量可一根据上面那样来自己定义,也可以通过路由来改变(但是经过测试这种方法不适用在手机上,模拟机上都测试失败(增加第五条为手机可以识别的)。):

【1】可以将每个翻译文件放到/language/中,比如/languages/en.json /language/zh.json

【2】然后通过useStaticFilesLoader来配置:

?

1

2

3

4

$translateProvider.useStaticFilesLoader({

  Prefix:’/languages/’,

  Suffix:’.json’

});

【3】需要引用js文件

?

1

<script src=”js/angular-translate-loader-static-files.min.js”></script>

【4】注意:

json文件格式要注意不可以有注释内容;

引用的js文件需要的是静态的文件angular-translate-loader-static-files.min.js。

5.这是经过测试研究后又得到的经验,上边路由方法其实是不可行的,可以将json文件改为js文件,在index.html文件中引用,接着在app文件中:

?

1

2

3

4

5

6

7

8

9

$translateProvider.translations('en',_translate_EN);

$translateProvider.translations('zh',_translate_ZH);

$translateProvider.translations('ja',_translate_JA);

$translateProvider.registerAvailableLanguageKeys(['en','zh','ja'],{

'en-*':'en',

'zh-*':'zh',

'jp-*':'ja'

});

$translateProvider.determinePreferredLanguage();

当然这种方法也不需要再引入<script src=”js/angular-translate-loader-static-files.min.js”></script>这个文件了.

三、这个自动获取手机语言一加上去,瞬间感觉软件高大上了好多~

参考教程:通过插件来控制切换语言的:https://blog.nraboy.com/2014/08/internationalization-localization-ionicframework-angular-translate/

这个更详细一点:http://angular-translate.github.io/docs/#/guide/07_multi-language