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: '數(shù)據(jù)',
//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: '退出應(yīng)用'
};
5.使用技巧
(1) 一般情況
<button translate="back">返回</button>
(2) 使用過(guò)濾器
<input type="search" placeholder=" 'keyword' | translate "></input>
(3) 結(jié)合控制器
<input ng-if="!en" type="search" placeholder="關(guān)鍵詞"></input>
<input ng-if="en" type="search" placeholder="keyword"></input>
controller中實(shí)現(xiàn)控制：
$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等技術(shù)文章、視頻教程和開源項(xiàng)目，請(qǐng)關(guān)注微信公眾號(hào)——全棧弄潮兒。
腦筋急轉(zhuǎn)彎：
生活小竅門
