Page 390 - AngularJS权威教程

370 第 27 章 本地化

档中。只要确保它嵌入在Angular脚本之后，因为它依赖于angular库。

<script src="path/to/angular.js"></script>
<script src="path/to/angular-translate.js"></script>
最后一项要点是，在你的应用中必须将angular-translate声明为一个加载依赖：

var app = angular.module('myApp', ['pascalprecht.translate']);
很好！现在已经准备好使用angular-translate组件来翻译你的应用了。

27.3 教你的应用一种新语言

安装好angular-translate后，将它声明为应用的依赖，这样才可以用它来翻译应用程序的
内容。
首先，需要提供翻译数据，这样应用才能真正地说一种新的语言。这一步可以通过使用最新
的$translateProvider服务配置$translate服务实现。
培养应用使用一种新的语言很简单。只需在应用上使用config函数，为应用提供不同的语言
翻译（比如英语、德语、希伯来语等）。首先，需要将$translateProvider注入到配置函数中，
就像这样：

angular.module('angularTranslateApp', ['pascalprecht.translate'])
.config(function($translateProvider) {
// 翻译会放到这里
});
要添加一种语言，必须让$translateProvider找到一个翻译表格，这是一个JSON对象，它
包含将要翻译为具体值的消息（键）。使用翻译表格时允许我们将翻译数据编写为一个简单的
JSON文件，以便从远程加载或者在编译时设置，比如：

{
'MESSAGE': 'Hello world',
}
在翻译表格中，键（key）表示一个翻译ID，而其值表示某种语言特定的翻译数据。现在，
先给应用添加一个翻译表格。$translateProvider提供了一个叫做translations()的方法来处
理它。

app.config(function($translateProvider) {
$translateProvider.translations({
HEADLINE: 'Hello there, This is my awesome app!',
INTRO_TEXT: 'And it has i18n support!'
});
});
有了这个翻译表格之后，应用就可以使用angular-translate了。由于这是在配置期间添加
的翻译表格，因此在angular-translate的组件被实例化时就能访问到这个翻译表格了。

先切换到应用的模板部分。要将键绑定给视图很简单，只需添加翻译数据到视图层即可。使
用translate过滤器时，甚至不必接触控制器或者服务，或者无需担心视图层：因为你可以从任
何控制器或者服务中解耦翻译逻辑，并且无需接触业务逻辑代码就能让视图可替换。