Angular 和翻译

Question

Angular 1.3.15 中文本翻译的最佳做法是什么？此版本的 Angular 仅支持部分本地化，包括复数化和格式转换，但没有文本翻译。 Angular 的未来版本有一些外部库，例如 angular-translate and the official library i18n。

当前的最佳翻译实践是什么？
如果以后有从1.3.15升级到1.4的打算怎么办？

Answer 1

我在尝试内化使用 angular 构建的单页应用程序时也遇到了困难。正如您正确指出的那样，未来的版本承诺会很好地支持 i18n。

就我而言，我最终使用过滤器来翻译文本。根据您的应用中有多少内容，这可能是也可能不是一个好的解决方案。

下面的文章描述了一个与我已经实现的非常接近的解决方案以及其他一些技巧

http://blog.trifork.com/2014/04/10/internationalization-with-angularjs/

我很想听听您在解决这个问题时采用了什么方法问题

干杯

Answer 2

解决方案是使用 angular-translate for translation files and angular-dynamic-locale for localisation files. The translation engine on angular-translate provides some very useful features that will help you in various scenarios and it seems to be very mature library. No need to migrate it away in the next version of angular. The angular-dynamic-locale uses localisation files provided by the angular-i18 library，所以它基本上是一个扩展，可以通过编程方式更改本地化。

在 index.html 中使用 bower 和加载脚本安装库。 Angular-translate 使用 angular-translate-loader-static-files 模块加载 json-files:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="bower_components/angular-dynamic-locale/tmhDynamicLocale.min.js"></script>

加载 angular-translate 和 angular-dynamic-locale 模块并在配置中初始化提供程序以从 localization 目录加载翻译和语言环境文件：

var app = angular.module('app', ['pascalprecht.translate', 'tmh.dynamicLocale'])
      .config(function ($translateProvider, tmhDynamicLocaleProvider) {

        $translateProvider
                .useStaticFilesLoader({
                    prefix: 'localization/translations-',
                    suffix: '.json'
                })
                .preferredLanguage('en-US')
                .useSanitizeValueStrategy('escaped') // Security for escaping variables
                .usePostCompiling(true); // Post compiling angular filters

        tmhDynamicLocaleProvider
                .localeLocationPattern('/localization/angular-locale_{{locale}}.js');

    )};

向控制器注入服务并加载资源文件：

app.controller('Ctrl', ['$scope', 'tmhDynamicLocale', '$translate',
    function ($scope, tmhDynamicLocale, $translate) {
        $translate.use('en-US'); // translations-en-US.json
        tmhDynamicLocale.set('en-US'); // angular-locale_en-US.js
}]);

现在翻译和区域设置适用于模板：

// angular-locale_en-US.js 
{{ 100 | currency }} // 0.00

// translations-en-US.json
// "NAME" : "John"
<label translate>NAME</label>
<input type="text" ng-model="name" placeholder="{{ 'NAME' | translate }}">

Angular 和翻译

Angular and translations

translation

localization

angularjs