npm 包 angular-gettext-tools 使用教程

angular-gettext-tools 是一个用于 AngularJS 应用程序的国际化工具。它通过提供获取gettext翻译字符串的服务，以及转化做过的翻译，完成了对AngularJS应用程序的国际化支持。本文将介绍 angular-gettext-tools 及其使用教程。

安装 angular-gettext-tools

安装 angular-gettext-tools 可以使用 npm 命令进行安装:

npm install angular-gettext-tools

当然，在安装之前，确保你已经安装了 AngularJS 和 gettext。

如何使用 angular-gettext-tools

首先，我们需要设置我们的 gettext 和 angular-gettext 以便开始处理我们想要翻译的字符串。在我们的 Application Configuration 中，我们需要设置以下参数:

angular.module('app', [
    'gettext'
])
.config(function (gettextProvider) {
    gettextProvider.setBaseUrl('/languages');
});

在这个例子中，gettextProvider.setBaseUrl 设置待翻译字符串的目录路径，它被默认设置为/languages路径，还可以通过 gettextCatalog.debug 来开启调试模式，应用开发人员可以对此作出 适当的修改。

接下来，你可以使用 gettextCatalog.getString() 方法来翻译一些字符串：

angular.module('app')
.controller('MainCtrl', function ($scope, gettextCatalog) {
    $scope.hello = gettextCatalog.getString('Hello World!');
});

在这个例子中，我们将 “Hello World!” 翻译成了目标语言（Chinese Simplified）的 “你好，世界！“

提取翻译字符串

将翻译字符串提取处理成 *.pot 文件可供翻译人员使用：

GETTEXT='gettext'
NGTEMPLATE='pipeto.ngtemplate'
NGTRANS='pipeto.ngtrans'

$GETTEXT --default-domain=myapp --output=po/template.pot `find . -name '*.js' -o -name '*.html'`

$NGTEMPLATE po/template.pot -o js/pot/templates.js 
$NGTRANS po/myapp.po -d js/pot/myapp-translations.js

这些命令使用了 gettext, pipeto.ngtemplate 和 pipeto.ngtrans 命令行工具来自动提取翻译字符串并生成所需文件。

加载翻译

下面的代码演示了如何加载翻译：

angular.module('app').run(function (gettextCatalog) {
  gettextCatalog.loadRemote('/po/myapp.zh-CN.po');
});

运行这段代码可以在本地磁盘上加载翻译语言字符串（在本例中是 zh-CN ）。

并通过 loadRemote 方法向服务器请求未加载的语言翻译字符串。 angular-gettext 工具可以使用标准的 gettext 格式化字符串，它是通过使用 %n$s 格式的占位符实现。而且，翻译语言字符串的格式必须为:

#: path/to/file.js:1
msgid “some message”
msgstr “some message translation”

可以通过命令行工具 gettext 来生成。

使用 ng-translate 进行版本升级

为了使现有的 AngularJS 应用程序能够升级到 2.0，angular-gettext 团队还提供了 angular-gettext-tools 的一个版本(ng-translate),而且这些软件工具是相互兼容的。

-- -------------------- ---- -------
--------------------- -
    -------------------------
--
---------------- -------------------- -
    -----------------------------------------
        ------- --------------
        ------- -------
    ---
    -------------------------------------------
---

$translateProvider.useStaticFilesLoader 用来加载语言翻译文件, $translateProvider.preferredLanguage() 用来设置默认语言, 并在加载翻译文件之前使用。

结论

通过 angular-gettext-tools 你可以轻松地完成 AngularJS 应用程序的国际化，同时遵循标准的 gettext 和 gettext PO 格式维护翻译。我们希望这篇文章对于想要学习或使用 angular-gettext-tools的人能够提供有用的指导。如果您想到任何问题或想法，请随时留言。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68032