Улучшить эту документациюМеждународный и локализованный интерфейс (i18n и l10n)

Международный интерфейс (i18n) — это процесс разработки продуктов таким образом, чтобы их можно было легко локализовать для различных языков и культур. Локализация (l10n) — это процесс адаптации приложений и текста для обеспечения их удобства использования в конкретных культурных или языковых рынках. Для разработчиков приложений интернационализация приложения означает абстрагирование всех строк и других элементов, специфичных для определенной локали (например, форматов дат или валют), из приложения. Локализация приложения подразумевает предоставление переводов и локализованных форматов для абстрагированных элементов.

Как Angular поддерживает i18n/l10n?

Angular поддерживает i18n/l10n для фильтров дат, чисел и валют.

Кроме того, Angular поддерживает локализованную поддержку множественного числа с помощью ngPluralize директивы.

Все локализуемые компоненты Angular зависят от наборов правил, специфичных для локали, которые управляет $locale служба.

В каталоге i18n/e2e исходного кода Angular представлены примеры, демонстрирующие использование фильтров Angular с различными наборами правил локали.

Что такое идентификатор локали?

Локаль — это конкретный географический, политический или культурный регион. Наиболее часто используемый идентификатор локали состоит из двух частей: кода языка и кода страны. Например, en-US, en-AU, и zh-CN — это допустимые идентификаторы локали, которые содержат как коды языка, так и коды страны. Поскольку указание кода страны в идентификаторе локали является необязательным, идентификаторы локали, такие как en, zh, и sk, также являются допустимыми. Более подробную информацию об использовании идентификаторов локали можно найти на сайте ICU.

Поддерживаемые локали в Angular

Angular разделяет наборы правил форматов чисел и дат на разные файлы, по одному файлу на каждую локаль. Список поддерживаемых локалей можно найти здесь.

Предоставление правил локали Angular

Существует два подхода к предоставлению правил локали Angular:

1. Предварительно скомпонованные наборы правил

Вы можете предварительно скомпоновать нужный файл локали с Angular, конкатенировав содержимое файла локали с определенной локалью в конец файла angular.js или angular.min.js.

Например, в *nix-системах, чтобы создать файл angular.js, содержащий правила локализации для немецкой локали, можно выполнить следующие действия:

cat angular.js i18n/angular-locale_de-de.js > angular_de-de.js

При запуске приложения, содержащего angular_de-de.js скрипт вместо универсального скрипта angular.js, Angular автоматически настраивается с правилами локализации для немецкой локали.

2. Включение скрипта локали в index.html

Вы также можете включить файл js, специфичный для локали, в страницу index.html. Например, если одному клиенту нужна немецкая локаль, вы предоставите index_de-de.html, который будет выглядеть примерно так:

<html ng-app>
 <head>
….
   <script src="angular.js"></script>
   <script src="i18n/angular-locale_de-de.js"></script>
….
 </head>
</html>

Сравнение двух подходов

Оба описанных выше подхода требуют подготовки различных index.html страниц или файлов JavaScript для каждой локали, которую может использовать ваше приложение. Вам также необходимо настроить сервер для предоставления соответствующего файла, соответствующего желаемой локали.

Второй подход (включение файла JavaScript локали в index.html) может быть медленнее, так как нужно загрузить дополнительный скрипт.

Ограничения

Хотя Angular делает i18n удобным, существует несколько моментов, которые следует учитывать при разработке приложения.

Символ валюты

Фильтр валюты Angular позволяет использовать символ валюты по умолчанию из службы локали, или вы можете предоставить фильтру пользовательский символ валюты.

Рекомендации по наилучшей практике: Если ваше приложение будет использоваться только в одной локали, то можно положиться на символ валюты по умолчанию. Если вы ожидаете, что пользователи из других локалей могут использовать ваше приложение, вы должны явно указать символ валюты.

Предположим, вы пишете приложение для банковского дела и хотите отобразить баланс счета в 1000 долларов. Вы записываете следующую привязку, используя фильтр валюты:

{{ 1000 | currency }}

Если ваше приложение в настоящее время в локали en-US, браузер отобразит $1000.00. Если кто-то в японской локали (ja) просмотрит ваше приложение, их браузер отобразит баланс ¥1000.00 вместо этого. Это проблема, потому что 1000 $ не равно 1000 ¥.

В этом случае необходимо переопределить символ валюты по умолчанию, предоставив фильтру валюты currency символ валюты в качестве параметра.

Если мы изменим вышеприведенное на {{ 1000 | currency:"USD$"}}, Angular всегда будет отображать баланс USD$1000 независимо от локали.

Длина перевода

Переведенные строки/форматы дат могут значительно различаться по длине. Например, June 3, 1977 будет переведено на испанский язык как 3 de junio de 1977.

При интернационализации приложения необходимо выполнить тщательное тестирование, чтобы убедиться, что компоненты пользовательского интерфейса работают как ожидается, даже когда их содержимое значительно различается по размеру.

Часовые пояса

Фильтр дат Angular использует настройки часового пояса браузера. Одно и то же приложение будет отображать различную информацию о времени в зависимости от настроек часового пояса компьютера, на котором запущено приложение. Ни JavaScript, ни Angular в настоящее время не поддерживают отображение даты со временем, заданным разработчиком.

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.3.20/docs/guide/i18n