Page 393 - AngularJS权威教程

27.6 加载语言 373

<div ng-controller="TranslateController"> 19
<button ng-click="changeLanguage('de')" translate="BUTTON_TEXT_DE"></button>
<button ng-click="changeLanguage('en')" translate="BUTTON_TEXT_EN"></button>
</div>
20
瞧瞧！现在我们就拥有一个支持多语言的应用了。

27.6 加载语言 21

如果我们只是设置静态语言那多没劲啊！多亏了Angular的$http服务，我们可以通过 22
$translateProvider的registerLoader方法来动态加载语言。
首先，需要安装angular-translate-loader-url扩展来设置loader-url服务，它要求有一 23
个后端服务器通过处理lang参数的方式返回JSON数据。如果你已经有一个处理带lang参数路由
的后端程序，那么可以像这样使用Bower安装loader-url服务：
24
$ bower install angular-translate-loader-url
如果你更喜欢使用服务来加载静态文件，那么可以使用static-files加载器从语言路径中 25
加载JSON文件。由于这个路由程序很简单，这里将继续使用Bower来安装这个服务：

bower install angular-translate-loader-static-files 26
现在，先让我们确保已经使用script标签将这个文件载入视图中了：
27
<script src="/js/angular-translate-loader-url.min.js"></script>
为了配置服务以使用这个static-files加载器，你需要让$translateProvider使用一个配
置对象来启用这个加载器。这个配置对象接受两个参数： 28

 prefix指定文件前缀（含文件路径）；
 suffix指定文件后缀（常见的扩展名）。 29

这个加载器试图从如下URL路径中获取文件：[prefix]/[langKey]/[suffix]。比如，如果
设置配置对象为： 30

$translateProvider.useStaticFilesLoader({
prefix: '/languages/', 31
suffix: '.json'
});
32
angular-translate 会试图从 /languages/en_US.json 中加载 en_US 语言。 像 这样使 用
StaticFilesLoader时就带来了延迟加载的额外好处。在运行时$translate只会在需要语言文件
时才加载它。 33
当然，应用加载时，异步加载会导致未翻译的内容闪现。可以通过将应用自带语言设置为默
认语言的方式规避这一副作用。 34

最后还有一个很酷的特性：可以使用本地存储（local storage）功能存储语言文件。
angular-translate提供了使用本地存储的能力；你可以用一个函数来启用这一功能： 35
.config(function($translateProvider) {
$translateProvider.useLocalStorage(); 36
});