Internationalization (i18n) is the process of developing products in such a way that they can be localized for languages and cultures easily. Localization (l10n), is the process of adapting applications and text to enable their usability in a particular cultural or linguistic market. For application developers, internationalizing an application means abstracting all of the strings and other locale-specific bits (such as date or currency formats) out of the application. Localizing an application means providing translations and localized formats for the abstracted bits.
Angular supports i18n/l10n for date, number and currency filters.
Additionally, Angular supports localizable pluralization support through the ngPluralize
directive.
All localizable Angular components depend on locale-specific rule sets managed by the $locale
service.
There a few examples that showcase how to use Angular filters with various locale rule sets in the
i18n/e2e
directory of the Angular
source code.
A locale is a specific geographical, political, or cultural region. The most commonly used locale
ID consists of two parts: language code and country code. For example, en-US
, en-AU
, and
zh-CN
are all valid locale IDs that have both language codes and country codes. Because
specifying a country code in locale ID is optional, locale IDs such as en
, zh
, and sk
are
also valid. See the ICU website for more information
about using locale IDs.
Angular separates number and datetime format rule sets into different files, each file for a particular locale. You can find a list of currently supported locales here
There are two approaches to providing locale rules to Angular:
You can pre-bundle the desired locale file with Angular by concatenating the content of the
locale-specific file to the end of angular.js
or angular.min.js
file.
For example on *nix, to create an angular.js file that contains localization rules for german locale, you can do the following:
cat angular.js i18n/angular-locale_de-de.js > angular_de-de.js
When the application containing angular_de-de.js
script instead of the generic angular.js script
starts, Angular is automatically pre-configured with localization rules for the german locale.
index.html
You can also include the locale specific js file in the index.html page. For example, if one client requires German locale, you would serve index_de-de.html which will look something like this:
<html ng-app>
<head>
….
<script src="angular.js"></script>
<script src="i18n/angular-locale_de-de.js"></script>
….
</head>
</html>
Both approaches described above require you to prepare different index.html
pages or JavaScript
files for each locale that your app may use. You also need to configure your server to serve
the correct file that correspond to the desired locale.
The second approach (including the locale JavaScript file in index.html
) may be slower because
an extra script needs to be loaded.
Although Angular makes i18n convenient, there are several things you need to be conscious of as you develop your app.
Angular's currency filter allows you to use the default currency symbol from the locale service, or you can provide the filter with a custom currency symbol.
Let's say you are writing a banking app and you want to display an account balance of 1000 dollars. You write the following binding using the currency filter:
{{ 1000 | currency }}
If your app is currently in the en-US
locale, the browser will show $1000.00
. If someone in the
Japanese locale (ja
) views your app, their browser will show a balance of ¥1000.00
instead.
This is problematic because $1000 is not the same as ¥1000.
In this case, you need to override the default currency symbol by providing the
currency
currency filter with a currency symbol as a parameter.
If we change the above to {{ 1000 | currency:"USD$"}}
, Angular will always show a balance of
USD$1000
regardless of locale.
Translated strings/datetime formats can vary greatly in length. For example, June 3, 1977
will be
translated to Spanish as 3 de junio de 1977
.
When internationalizing your app, you need to do thorough testing to make sure UI components behave as expected even when their contents vary greatly in content size.
The Angular datetime filter uses the time zone settings of the browser. The same application will show different time information depending on the time zone settings of the computer that the application is running on. Neither JavaScript nor Angular currently supports displaying the date with a timezone specified by the developer.