码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-03-13 12:19:57      阅读:1063      评论:0      收藏:0      [点我收藏+]

标签:

 一、手动切换语言

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

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

2.需要引用js文件

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

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

<button ng-click=”changeLanguage(‘en’)” translate=”Language_en”>

<button ng-click=”changeLanguage(‘zh’)” translate=”Language_zh”>

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

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

$scope.changeLanguage = function (langKey){

$translate.use(langkey);

}

}])

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

var translationsEN={

Language_en: ‘english’,

Language_zh: ‘chinese’

};

var translationZH={

Language_en: ‘英文‘,

Language_zh: ‘中文‘

};

之后再写函数方法:

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文件中首先要加上一个参数:

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

2.需要引用js文件

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

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

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

.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来配置:

$translateProvider.useStaticFilesLoader({

Prefix:’/languages/’,

Suffix:’.json’

});

【3】需要引用js文件

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

【4】注意:

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

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

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

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

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

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

标签:

原文地址:http://www.cnblogs.com/maoyazhi/p/4332362.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!