现在互联网产品越来越国际化了,给项目添加英文或其他语言的切换功能相当有必要,在 Ionic 下实现不同语言切换功能,以下一步步来教你实现。
首先,打开 cmd 命令行界面并进入项目目录,通过命令安装 angular 插件:
bower install angular-translate
bower install angular-translate-loader-static-files
安装完毕后,项目目录/www/lib/ 下会看到 angular-translate、angular-translate-loader-static-files 两个文件夹,里边有我们接下来需要用到的相关 js 文件。
接下来就是在 index.html 里,找到合适的位置导入两个相关的 js 文件 angular-translate.min.js 和 angular-translate-loader-static-files.min.js:
...
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="lib/angular-translate/angular-translate.min.js"></script>
<script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
...
然后需要把翻译插件关联到我们的模块里,app.js 配置如下:
angular.module('imwebapp', ['ionic', 'imwebapp.controllers', 'imwebapp.services', 'pascalprecht.translate'])
.run(function(){
...
})
.config(function($translateProvider){
$translateProvider.useStaticFilesLoader({
files: [{
prefix: './languages/',
suffix: '.json'
}]
});
$translateProvider.determinePreferredLanguage();
//首选语言
$translateProvider.preferredLanguage('zhCN');
$translateProvider.fallbackLanguage('zhCN');
});
最后在 项目目录/www/ 下创建文件夹 languages,并新建 zhCN.json、enUS.json 两个文件用于存储中英文翻译文字,当然以此类推,你可以添加更多的语言翻译文件。
配置完毕后,就可以在页面里使用翻译,.html 里的格式如下:
<ion-toggle ng-model="settings.enable">{{"Enable"|translate}}</ion-toggle>
这里需要翻译的是 Enable 这个字符串,在 zhCN.json 里如下编写得以翻译:
{
"Enable":"开启"
}
由于设置了默认语音包是 zhCN,所以再看看页面的【Enable】,是否已经翻译成了【开启】。
切换语言,要在 controller 里实现:
angular.module('imwebapp.controllers', ['ionic']).controller('imCtrl', function($translate){
//查看当前的语言
console.log($translate.use());
//设置要切换的语言,以下语句切换成了英文
$translate.use("enUS");
});