Angularjs Internationalization (i18n/l10n) detailed _angularjs

I. i18n and L10N in Angularjs

1. What are i18n and l10n?

Internationalization (internationalization), referred to as i18n, is the specification for products to be developed in a way that they can simply localize the language and culture of the product. Localization (Localization), referred to as L10N, a specification that enables applications and texts to have the ability to adapt to a particular culture or language market. For an application developer, internationalizing A program means that you need to extract all of the strings and other areas of the program (such as date and currency formats) from your programs. Localizing a program means that you need to provide translations and format localization of the blocks extracted from the i18n.

2. What level of i18n and l10n do current angular support?

Currently, angular provides i18n, l10n support for datetime, number, and currency filters.

In addition, angular supports multiple localization through the ngpluralize Directive (http://docs.angularjs.org/api/ng.directive:ngPluralize).

All localizable controls depend on the locale-set attribute rule set that is managed through the $locale service.

To allow readers to see actual examples, officials have prepared some examples of web pages that show how to use angular filters through regional rule collection variables. We can find the corresponding example in GitHub (HTTPS://GITHUB.COM/ANGULAR/ANGULAR.JS/TREE/MASTER/I18N/E2E) or i18n/e2e in the angular development package.

3. What is a zone ID (locale ID)?

Locale is a specific geographical, political and cultural region. The most commonly used locale IDs are made up of two parts: language code and Country code. For example, EN-US,EN-AU,ZH-CN are valid locale IDs that contain both language code and country code. Because the country code specified in the locale ID is optional, the locale ID, such as en, en, and SK, are valid. View the site ICU (Http://userguide.icu-project.org/locale), where there is more information about the locale ID.

4. Locale supported by angular

Angular sets the rule set for numbers and datetime formats separately in different files, each of which has a unique area. We can find the currently supported locale list here (Https://github.com/angular/angular.js/tree/master/i18n/locale)

Ii. customizing locale rules in angular

There are two ways to customize locale in angular:

1. Pre-binding set of rules (pre-bundled rule sets)

We can implement pre-bundle files that will be angular and angular.js (locale) by connecting the locale-specific files to the angular.min.js.

For example, in *nix, we can create a angular.js file with a file containing the German regional localization rules by using the following command:

cat angular.js i18n/angular-locale_de-ge.js > Angular_de-ge.js

When the Angular_de-ge.js script is used instead of the generic Angular.js script from the application, angular starts automatically pre-configured (pre-configured) the localized rules for the German area.

2. Contains locale JS script to index.html page

We can also include the specified area of the JS file into the page. For example, if a client needs a German zone file, we can provide a page similar to the following:

Both of these methods require us to provide different index.html pages or JS files for localization. We also need to configure our server to provide the correct locale files that match expectations.

However, the second approach, which contains the locale file to the page, is slower because you need to download a script more. （-_-!!!! ）。

Third, the trap ("Gotchas")

1. Currency symbol Trap

Angular's currency filter allows us to use the default currency symbol from the locale service, and we can also provide a custom currency symbol. If our application is only used in one area, then we can rely on (set) the default currency symbol. However, if we expect users from other regions to use our application, we should provide our own custom currency notation to ensure that the user understands the actual value.

For example, if we want to show that the account balance is 1000 yuan by binding currency filter: {{1000 | currency}}, our application is currently using an en-us locale, and "$1000.00" will be displayed. However, if users from other regions (such as mainland China) Visit our applications, the user's browser will specify the area set to "Mainland China", and the balance will be shown as "￥1000.00" (a very sad reminder of the error, exchange rate ...). ）。

In this example, when we need to set the filter, we need to pass the currency filter (http://docs.angularjs.org/api/ng.filter: Currency) provides a currency symbol as a parameter to override the default currency symbol, such as: usd$. In this way, angular ignores any locale changes and always displays the balance as "usd$1000.00".

2. Translation length Traps

Remember that when translating strings and event formats, the length can vary greatly. For example, "June 3, 1977" translates to Spanish when it becomes "3 de junio de 1977". Of course, there may be more extreme conditions. Therefore, when we internationalize the application, we need to set the appropriate CSS rules and conduct a thorough test to make sure that the UI components do not break rows (variants).

3. Time zone

Remember, angular's datetime filter is a time zone set by using the browser-side. Therefore, the same application will display different time information based on the time zone settings of the computer running the application, rather than depending on the time zone specified by the JavaScript or angular developer.