ANGULARJS Development Guide 7:angularjs localization, internationalization, and compatibility with IE low-version browsers

Angularjs localization, internationalization

Internationalization, abbreviated as i18n, refers to the rapid adaptation of products to different languages and cultures.

localization, referred to as l10n, is the product that is used in specific cultural and language markets.

For developers, internationalizing an application means pulling out all the text and other data that is different from the region.

localization means providing a format for translating and converting costs to these extracted data and text.

Currently, ANGULARJS supports the internationalization and localization of dates, numbers and currencies.

In addition, ANGULARJS alsongPluralizesupports local diversification through directives.

All ANGULARJS localization components rely on the $locale service to manage localization rules (Locale-specific rule sets).

If you want to see examples directly, you can find these examples under the i18n/e2e folder of the Angularjs development package.

An area (locale) refers to a geographical, political, culturally divided area. The common area ID consists of two parts: the language code and the country code. For example, en-us, en-au, ZH-CN are legal area IDs that contain language codes and country codes. Because the country code is optional. So the ID such as EN, zh, and SK is also legal. View the ICU website for more area ID information.

For areas supported by ANGULARJS, ANGULARJS is placed in separate files according to the numbers, event format, and each file corresponds to a specified region. You can find a list of supported areas in the Angularjs folder.

There are two ways to use the new regional rules:

1. Pre-bundling rules

You can pre-bind the region file you want to use by bundling the region file with Angular.js.

For example, in the *nix system, you can create a angular.js file that contains German regional rules by following the commands below:

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

When an app uses a angular_de-ge.js script instead of a angular.js script, Angularjs automatically uses the German localization rules.

2. Load a regional script into index.html

You can also load the specified region file into index.html. For example, when a client request is from Germany, you can return to index_de-ge.html, and this file looks like this:

ng-app>

  ….

< Span class= "ATN" > < Script src= "Angular.js" ></SCRIPT>

< Span class= "ATN" >< Span class= "PLN" > span class= "tag" ><script src= "i18n/ Angular-locale_de-ge.js "></SCRIPT>

< Span class= "ATN" >< Span class= "PLN" >< span class= "tag" >  &NBSP;

< Span class= "ATN" >< Span class= "PLN" >< span class= "tag" >< Span class= "PLN" > </HEAD>

The second way (load the script in index.html) is slower because additional script loading is required.

Angularjs's currency filter allows you to use the default currency symbol in the regional service, but you can also use a filter that defines the currency symbol yourself. If your app is only used in one region, it's good to use the default coin symbol. But if your app is used in multiple regions, you should provide your own coin symbol to ensure that the value of the money can be correctly understood.

For example, if you want to display an account balance of $1000, use the following expression {{1000|currency}} with a coin filter, and your app is currently in the en-US region, then ' $1000.00 ' will be displayed. However, if the user uses (for example, Shenzhen, China) your application elsewhere, its browser will designate the region as CN, and ' ￥1000.00 ' will be displayed. This will confuse your users.

In this example, you need to specify a coin filter by yourself to replace the default coin symbol. This filter must have a coin symbol of your own designation, such as usd$1,000.00. In this way, Angularjs will always show ' usd$1000 ' and ignore the conversion of the area.

It is also important to remember that the length of the translation may differ greatly from the original text. For example,June 3, 1977in Spain it will be translated into3 de junio de 1977. And there are more extreme situations, so when it comes to internationalizing your application, you need to write CSS rules and test them well.

Finally, note that ANGULARJS is using the browser's time zone settings. So the same app will show different time formats based on different devices. JavaScript and Angularjs do not support the use of time zones developed by a unified developer.

Compatible with IE low version browser

If you want to make your Angularjs app compatible with IE8 and IE8 below, you need to read the following points carefully.

To make your Angularjs app work in IE, you must:

Make sure the JSON string can be parsed correctly (IE7 required), you can use JSON2 or JSON3 (these two things are third-party libraries, can be downloaded on GitHub) to achieve.

You cannot use custom element tags, such as<NG:VIEW>(you can only use the form of attributes, such as<div ng-view>), or,

If you use a custom label name, you must follow the steps below to ensure IE works correctly:

if LTE IE 8]>     <script > document.createelement (' ng-include ');        Document.createelement (' ng-pluralize ');        Document.createelement (' Ng-view ');  // optionally these for CSS Document.createelement (' ng:include ');        Document.createelement (' ng:pluralize ');        Document.createelement (' Ng:view ');  </script>   <![ endif]-->  </body>

What the above code needs to know is:

xmlns:ng-Namespaces-you need to prepare a namespace for each custom tag you use or prepare to use.

document.createElement(Your tag name)-Custom label creation-because this is just an issue with the old version of IE, so you need to use it according to the situation. For each tag that you do not use in a namespace or that is not defined in HTML, you need to declare it beforehand in order for the old version of IE to work correctly.

There are some details to note:

IE handling nonstandard label names can cause problems. The problem can be divided into two categories, each with its own workaround.

If the label signature starts with amy:prefix: This is treated as an XML namespace and must be declared with a namespace.

If the label is not:signed, it is not a standard HTML tag. Then you have to usedocument.createElement(‘my-tag‘)it in advance to create it.

If you're going to use a CSS selector to add a style to a custom tag, you'll havedocument.createElement(‘my-tag‘)to create it first, regardless of the XML namespace.

Fortunately, this restriction of IE only exists on the label name, there is no limit to the tag attribute name. Therefore, when using<div my-tag your:tag> </div>.this form on IE, there is no special requirement.

What if I didn't do what I said?

Suppose you use a non-HTML standard tag, which is temporarily called MyTag (known as My:tag or My-tag):

It should have been parsed into the following DOM:

#document  + -     HTML+- BODY +- mytag +-#text: some text

The desired result is that the BODY element contains amytagchild element called. This child element contains the text "some text" at the same time.

But IE does not parse this way (if you do not follow the steps to fix ie before):

#document  + -     HTML+- BODY+- mytag +- #text: Some text +-/ MyTag

In IE, the BODY element has three child elements:

(1) A self-closing label MyTag. and self-closing labels. The last closing character/is optional, but the label does not allow the inclusion of child elements. So the browser will parse the some text into a sibling node.

(2) a plain text node. This should have been the child node of the mytag above, not the sibling node.

(3) An illegal self-closing label/mytag. Because the tag name is not allowed to contain/, it is illegal to say it. In addition, this closing tag should not be part of the DOM because it is used to describe the end position of the tag.

Come on!

ANGULARJS Development Guide 7:angularjs localization, internationalization, and compatibility with IE low-version browsers