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

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

阅读量：6924 次

发布时间：2019-06-27

本文共 2651 字，大约阅读时间需要 8 分钟。

本文转自：

欢迎访问我们的网站，网站上有更多关于技术性的交流：

一、手动切换语言

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

                            
angular.module（’passbox’,[‘ionic’,’pascalprecht.translate’]）

2.需要引用js文件

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

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

                            
<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的控制器中加入切换的函数：

                            
.controllers(‘edit’,[‘$scope’ ，
function
($scope, $translate){ 
　　$scope.changeLanguage = 
function
(langkey) { 
　　　　$translate.use(langkey); 
　　};<br>}])
         
       

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。

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

                            
$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>这个文件了.

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

参考教程：通过插件来控制切换语言的：

这个更详细一点：

转载地址：http://vycjl.baihongyu.com/

你可能感兴趣的文章