Ionic AngularJS 国际化多语言支持实现不同语言间切换

现在互联网产品越来越国际化了,给项目添加英文或其他语言的切换功能相当有必要,在 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");

});

相关文章