Ionic + 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	<button  class = "button"  ng-click= "changeLanguage('en')"  translate= "Language_en" ></button> <button  class = "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

var  translationsEN = { 　　Language_en:  'english' , 　　Language_zh:  'chinese' , }; var  translationZH = { 　　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

四、还有一些其他的方法：$filter('translate')('exit')
http://stackoverflow.com/questions/20540877/correct-use-for-angular-translate-in-controllers

五、$filter('translate')('copy_success')在控制器中翻译