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) 一般情况

<button translate="back">返回</button>

(2) 使用过滤器

<input type="search" placeholder=" 'keyword' | translate "></input>

(3) 结合控制器

<input ng-if="!en" type="search" placeholder="关键词"></input>

<input ng-if="en" type="search" placeholder="keyword"></input>

controller中实现控制：

$scope.en = '';

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

$scope.en = true;

}else{

$scope.en = false;

}

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

---

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