angular-translate 多语言最佳实践

1.安装

bower install angular-translate

bower install angular-translate-loader-static-files

2.添加依赖

varapp=angular.module('myApp', ['pascalprecht.translate']);

3.配置

.config(function($translateProvider){

//$translateProvider.translations('en', {

// check: 'Check',

//overview: 'Overview',

//data: 'Data',

//my: 'My'

//})

//.translations('zh', {

// check: '体检',

//overview: '总览',

//data: '数据',

//my: '我的'

//});

$translateProvider.translations('en', translationEN);

$translateProvider.translations('zh', translationZH);

$translateProvider.registerAvailableLanguageKeys(['en','zh'],{

'en-*': 'en',

'zh-*': 'zh'

});

$translateProvider.determinePreferredLanguage();

})

4.资源文件

en.js

var translationEN = {

//general

keyword: 'keyword',

back: 'back',

exit: 'exit'

};

zh.js

var translationZH = {

//general

keyword: 'keyword',

back: '返回',

exit: '退出应用'

};

5.使用技巧

(1) 一般情况

返回

(2) 使用过滤器

(3) 结合控制器

controller中实现控制：

$scope.en = '';

if($translate.use()=='en'){

$scope.en = true;

}else{

$scope.en = false;

}

（4）$translate.instant('back');

前端面试题每日更新，欢迎参与讨论，地址：https://github.com/daily-interview/fe-interview。

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

脑筋急转弯：

生活小窍门