一、手动切换语言
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