角度和翻译答案

【问题标题】：Angular and translations角度和翻译
【发布时间】：2015-05-19 10:44:09
【问题描述】：

Angular 1.3.15 中文本翻译的最佳做法是什么？这个版本的 Angular 只有部分本地化支持，包括复数和格式转换，但没有文本翻译。对于 Angular 的未来版本，有一些外部库，如 angular-translate 和官方库 i18n。

目前翻译的最佳做法是什么？
如果未来有从 1.3.15 升级到 1.4 的计划怎么办？

【问题讨论】：

标签： angularjs localization translation

【解决方案1】：

解决方案是将angular-translate 用于翻译文件，将angular-dynamic-locale 用于本地化文件。 angular-translate 上的翻译引擎提供了一些非常有用的功能，可以在各种场景中为您提供帮助，它似乎是一个非常成熟的库。无需在 Angular 的下一个版本中将其迁移出去。 angular-dynamic-locale 使用the angular-i18 library 提供的本地化文件，因此它基本上是一个扩展，可以通过编程方式更改本地化。

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

<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 }} // $100.00

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

【讨论】：

【解决方案2】：

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

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

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

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

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

干杯

【讨论】：