比较 angular-translate 的不同异步加载器

• 下载示例 - 4.2 KB

引言

在对 Angular Web 应用程序进行国际化时，angular-translate [^] 是首选的头号模块。自 2013 年 3 月以来，该模块已有 49 个发布版本，七位活跃作者（贡献了 2000 多行代码），并且随着 Angular 框架的快速发展而不断演进。

大型 Angular 应用程序通常需要 在运行时加载翻译表。与其在源代码中实现所有语言的翻译并在客户端连接时部署所有翻译，不如只部署当前所选语言的资源。

在 angular-translate 模块中，这可以通过 异步加载器 来实现。开发者文档关于异步加载 [^] 的内容非常详细，特别是关于如何实现每个加载器。但是，作为读者，您需要深入研究实现示例，才能评估哪个加载器最适合您的需求。本文旨在简要介绍每个加载器，包括加载新翻译表的示例 HTTP 请求，并提出一些使用建议。

国际化 (i18n) 和本地化 (l10n)

在 Angular 核心文档 [^] 中，国际化和本地化分别缩写为 i18n 和 l10n。为保持一致性，本文将沿用这些缩写。

关注点

根据当前实现 [^]，有四种类型的加载器可用于在运行时提供翻译表。每种加载器都有不同的特性、优点和缺点。

URL 加载器

URL 加载器具有非常简单的客户端实现。作为配置，该加载器将静态 URL 作为参数，例如 'l10n/res.json'。当在运行时请求 'en_US' 的语言资源时，客户端会向服务器发送以下 HTTP 请求：

GET /l10n/res.json?lang=en_US

然后由服务器解析请求并以 JSON 对象形式返回正确的语言资源。

何时使用？

• 当需要简单精简的客户端实现时。
• 当您想在服务器端解析查询参数 ?lang= 并添加一些逻辑时。

包

使用包 angular-translate-loader-url。

静态文件加载器

静态文件加载器期望语言资源可通过直接 HTTP 请求在服务器上获得。每个语言资源文件的 URL 必须符合 [prefix][lang][postfix] 的模式。对于前缀 'l10n/'，语言 'en_US' 和后缀 '.json'，这将产生如下服务器请求：

GET /l10n/en_US.json

服务器再次必须以 JSON 对象的形式返回正确的语言资源。

何时使用？

• 当需要简单精简的客户端实现时。
• 当服务器将每个翻译表存储在单独的 JSON 文件中，随时可部署时。

包

使用包 angular-translate-loader-static-files。

部分加载器

部分加载器将静态文件加载器扩展到一个 [part] 参数。当加载应用程序的特定部分（例如模块或控制器）时，可以手动设置此参数。除了 [lang] 参数，此值还可以包含在请求 URL 中。在配置期间，部分加载器会获取一个 URL 模板。当设置或更改语言时，此模板将直接传递给服务器。

示例

• 模板 URL：'l10n/{part}/{lang}.json'
• 部分：'main'
• 语言：'en_US'

Get /l10n/main/en_US.json

与静态文件加载器类似，当请求此 URL 时，服务器必须将语言资源保持在正确的模式下，随时可部署。

何时使用？

• 对于模块化应用程序，当用户只访问应用程序的一部分时。
• 对于语言资源量巨大的大型应用程序。

包

使用包 angular-translate-loader-partial。

自定义加载器

最终，这些加载器可能无法满足您的要求。有没有可能在 Angular 客户端获得对加载过程更多的控制？是的，有自定义加载器。对于此加载器，angular-translate 会注入框架服务 $http 和 $q 以直接实现加载调用。有关如何实现自定义加载器的详细信息，请参阅 Angular Translate wiki 页面 的相应部分。

HTTP 请求取决于自定义实现。

何时使用？

• 当需要对加载过程进行完全控制时
• 当客户端自定义加载器实现的成本由自定义功能的好处所抵消时

Using the Code

本文附带两个示例项目。要测试异步资源加载，您必须在 HTTP 服务器中托管这些示例。

在 HTTP 服务器中托管示例

如果您熟悉 Node.js，http-server [^] 可能是您的首选工具：打开命令行，浏览到包含 index.html 文件的文件夹。然后键入 http-server 来启动服务器。您可以在命令行输出中读取使用的端口，如果服务器成功启动。任何其他从磁盘提供 HTML 文件的服务器也可以。如果服务器能打印收到的 HTTP 请求，会很有帮助。

HTTP 请求

当您在浏览器中加载网站时，请查看服务器收到的 HTTP 请求。初始 HTTP GET 请求之后，应该跟着上面提到的特定于加载器的调用。

摘要

这四种加载器提供了广泛的解决方案。虽然 URL 加载器或静态文件加载器可以快速实现，并且可能满足绝大多数用例，但其他两种则允许高度专业的解决方案。部分加载器根据应用程序结构对语言资源进行模块化，而自定义加载器提供了一个强大的杠杆，可以最大程度地自定义翻译资源的加载行为。

参考文献

• Angular-translate on Github: https://github.com/angular-translate/angular-translate
• Angular-translate wiki on async loading: https://github.com/angular-translate/angular-translate/wiki/Asynchronous-loading

历史

• 2016 年 2 月 9 日：初始版本
• 2016 年 2 月 13 日：添加了示例代码