Page 392 - AngularJS权威教程

372 第 27 章 本地化

值作为参数，这个参数指向某个翻译表格。
现在，我们来告诉应用应该使用英语作为默认语言：

app.config(function($translateProvider) {
$translateProvider.translations('en', {
HEADLINE: 'Hello there, This is my awesome app!',
INTRO_TEXT: 'And it has i18n support!'
})
.translations('de', {
HEADLINE: 'Hey, das ist meine großartige App!',
INTRO_TEXT: 'Und sie untersützt mehrere Sprachen!'
});
$translateProvider.preferredLanguage('en');
});

27.5 运行时切换语言

要在运行时切换到一种新语言，必须使用angular-translate的$translate服务。它有一个
use()方法，这个方法要么返回一个当前正在使用的语言对应的语言键，或者传递一个语言键作
为参数，这个参数会让angular-translate使用该参数对应的语言。

为了感受一下如何在真实的应用中运用这一功能，我们可以添加两个表示译文的翻译ID，稍
后添加到HTML模板中的按钮会用到这两个ID：

app.config(function($translateProvider) {
$translateProvider.translations('en', {
HEADLINE: 'Hello there, This is my awesome app!',
INTRO_TEXT: 'And it has i18n support!',
BUTTON_TEXT_EN: 'english',
BUTTON_TEXT_DE: 'german'
})
.translations('de', {
HEADLINE: 'Hey, das ist meine großartige App!',
INTRO_TEXT: 'Und sie untersützt mehrere Sprachen!'
BUTTON_TEXT_EN: 'englisch',
BUTTON_TEXT_DE: 'deutsch'
});
$translateProvider.preferredLanguage('en');
});
接下来，我们要使用$translate服务和它的use()方法在控制器上实现一个方法以便在运行
时改变语言。为此，要将$translate服务注入到应用的控制器中，然后添加一个函数给它的
$scope对象：

app.controller('TranslateController', function($translate, $scope) {
$scope.changeLanguage = function(langKey) {
$translate.use(langKey);
}
});
接着，我们通过为每种语言添加一个按钮的方式在HTML模板中反映这一变化。还必须在每
个按钮上设置一个ng-click指令在运行时调用改变语言的函数。