angular国际化

随着世界各地Web访问量的增加，作为开发者的我们也在不断让应用国际化、本地化。当用
户访问我们的应用时，他应该能够在运行时立即切换语言环境。
鉴于我们正在开发的是AngularJS客户端应用，尤其不希望用户必须刷新页面或者访问一个
完全不同的URL。当然，AngularJS可以很容易地调整那些国际化读者的本机语言环境，或许通
过为不同语言生成不同模板的方式为应用提供服务。
然而，这个过程可能会很麻烦，当我们想要改变应用的布局时会发生什么情况？每个独立的
模板都需要重新构建和部署。而这个过程应该是很简单才对。
27.1 angular-translate
你可以使用angular-translate来替代创建新模板的方式，这个AngularJS模块为你的应用提
供了i18n（国际化）服务。angular-translate要求创建一个JSON文件，它描述每种语言的翻译
数据。然后它只会在必要时从服务器延迟加载特定语言的翻译数据。
angular-translate库自带了很多内置指令和过滤器，这让我们的应用国际化变得简单。我
们一起来学习一下。
27.2 安装
为了使用angular-translate，需要加载这个库。可以使用几种不同的方式安装它，但是推
荐使用Bower。
Bower是一个前端包管理器。它不仅能够处理JavaScript库，还可以处理HTML、CSS以及图
片程序包。一个程序包就是一个简单的封装，典型的例子就是一个可公开访问的第三方代码库。
 使用Bower
使用标准的Bower方法安装angular-translate：
$ bower install angular-translate
此外，你也可以从Github下载压缩版的angular-translate。
安装好最新稳定版本的angular-translate之后，你就可以简单地将它嵌入到你的HTML文  

档中。只要确保它嵌入在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!'
});
});
有了这个翻译表格之后