Page 391 - AngularJS权威教程

27.4 多语言支持 371

从根本上说，translate过滤器的工作原理就像这样： 19

<h2>{{ 'TRANSLATION_ID' | translate }}</h2>
也可以使用这个translate过滤器来更新示例应用程序： 20

<h2>{{'HEADLINE' | translate }}</h2>
<p>{{'INTRO_TEXT' | translate}}</p> 21
很好！现在可以翻译视图层中的内容了，并且还避免了翻译逻辑污染控制器逻辑；然而，即
使我们不使用angular-translate也能得到完全相同的结果，因为在这个示例应用中只涉及一种 22
语言。
接下来我们一起看看angular-translate真正的能力，然后学习如何教应用多种语言。 23

27.4 多语言支持 24

前面我们已经通过translations()方法为应用添加了一个翻译表格。
25
正如translations()方法所设置的，$translateProvider识别了一种语言。现在，可以通
过提供第二个翻译表格以同样的方式添加一种新的语言。
26
设置第一个翻译表格时，我们可以给它提供一个键（语言键）来指定我们要翻译的语言。这
样可以使用不同的语言键添加不同的翻译。
27
更新一下应用，让它包含第二种语言：

app.config(function($translateProvider) { 28
$translateProvider.translations('en_US', {
HEADLINE: 'Hello there, This is my awesome app!',
INTRO_TEXT: 'And it has i18n support!'
}); 29
});
为了给不同语言添加附加的翻译表格，比方说德语，我们只需使用不同的语言键做同样的事 30
情就行了。

app.config(function($translateProvider) { 31
$translateProvider.translations('en', {
HEADLINE: 'Hello there, This is my awesome app!',
INTRO_TEXT: 'And it has i18n support!'
}) 32
.translations('de', {
HEADLINE: 'Hey, das ist meine großartige App!',
INTRO_TEXT: 'Und sie untersützt mehrere Sprachen!' 33
});
});
现在，应用能识别两种不同的语言了。你可以根据需要随意添加尽可能多的语言；但是，现 34
在这里有了两种有效的语言，那么应用如何知道该使用哪种语言呢？在你告诉它应该怎么做之
前，angular-translate不会推荐任何语言。 35
要设置首选语言，你可以使用$translateProvider.preferredLanguage()方法。这个方法
会告诉angular-translate哪种已注册语言是应用默认应该使用的语言。它要求使用一个语言键 36