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');
前端面试题每日更新，欢迎参与讨论，地址：https://github.com/daily-interview/fe-interview。
更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。
脑筋急转弯：
生活小窍门
