1. I18n und L10n in AngularJs
1. Was sind I18n und L10n?
Die Internationalisierung, die als i18n bezeichnet wird, ist ein Standard für die Produktentwicklung in einer Weise, dass sie einfach die Produktsprache und -kultur lokalisieren können. Die als L10N bezeichnete Lokalisierung ist ein Standard, mit dem Anwendungen und Texte sich an spezielle Kultur- oder Sprachmärkte anpassen können. Für Anwendungsentwickler bedeutet Internationalisierung eines Programms, dass alle Zeichenfolgen und andere Bereiche aus dem Programm extrahiert werden müssen, in dem sie spezieller sind (z. B. Datums- und Währungsformate). Das Lokalisieren eines Programms bedeutet, die Übersetzung und Formatlokalisierung von aus i18n extrahierten Blöcken bereitzustellen.
2. Welche I18N und L10N werden derzeit von Angular unterstützt?
Derzeit bietet Angular I18N und L10N -Unterstützung für DateTime-, Number- und Währungsfilter.
Darüber hinaus unterstützt Angular eine diversifizierte Lokalisierung durch Ngpluralize -Richtlinie (http://docs.angularjs.org/api/ng.directive:Ngpluralize).
Alle lokalisierbaren Steuerelemente stützen sich auf das Feature -Regelsatz für die Regionaleinstellung, der über den $ -Sonokus -Service verwaltet wird.
Damit die Leser tatsächliche Beispiele sehen können, hat der Beamte einige Webseitenbeispiele vorbereitet, um zu zeigen, wie Winkelfilter verwendet werden, um Variablen über Regionalregeln zu sammeln. Wir können entsprechende Beispiele in GitHub (https://github.com/angular/angular.js/tree/master/i18n/e2e) oder in i18n/e2e im Winkelentwicklungspaket finden.
3. Was ist eine regionale ID?
Das Gebietsschema ist eine spezifische geografische, politische und kulturelle Region. Die am häufigsten verwendete Gebietsschemas -ID besteht aus zwei Teilen: Sprachcode und Ländercode. Zum Beispiel sind En-US, En-Au und ZH-CN alle gültige Gebietsschemas-IDs, die Sprachcodes und Ländercodes enthalten. Da die in der Gebietsschemas -ID angegebene Landkodierung optional ist, sind Gebietsschema -IDs wie EN, ZH und SK alle gültig. Schauen Sie sich die ICU auf der Website (http://userguide.icu-project.org/locale) an, wo weitere Informationen zur Lokale-ID vorhanden sind.
4. Angular unterstütztes Gebietsschema
Angular trennt den Satz von Regeln für Zahlen, Datums- und Zeitformate in verschiedenen Dateien. Jede Datei verfügt über einen eindeutigen Bereich. Hier finden Sie die aktuell unterstützte Lokale (https://github.com/angular/angular.js/tree/master/i18n/locale).
2. Anpassen Sie die Regeln des Gebietsschemas in Angular
Es gibt zwei Möglichkeiten, das Gebietsschema in Angular anzupassen:
1. Vorgebundene Regelsätze
Wir können die erwartete Gebietsschemasdatei implementieren, indem wir die lokalspezifische Datei mit angular.js oder angular.min.js verbinden.
In *nix können wir beispielsweise eine Angular.js -Datei erstellen, die die deutschen regionalen Lokalisierungsregeln über den folgenden Befehl enthält:
Cat Angular.js I18N/Angular-Locale_DE-ge.js> Angular_de-ge.js
Wenn die Anwendung das Skript angular_de-ge.js anstelle des allgemeinen Angular.js-Skripts verwendet, beginnt Angular automatisch vorkonfiguriert (vorkonfigurierte) Lokalisierungsregeln in Deutschland.
2. Einschließen
Wir können auch JS -Dateien in den angegebenen Bereich in die Seite einbeziehen. Wenn ein Client beispielsweise eine deutsche regionale Datei benötigt, können wir eine Seite wie folgt bereitstellen:
<html ng-App> <kopf> ... <script src = "Angular.js"> </script> <script src = "i18n/Angular-locale_de-ge.js"> </script> ... </head> ... </html>
Bei beiden oben genannten Methoden müssen wir unterschiedliche Indexseiten oder JS -Dateien in jeder Region zur Lokalisierung bereitstellen. Wir müssen auch unseren Server so konfigurieren, dass die richtigen, gewünschten Gebietsschemasdateien angegeben werden.
Die zweite Methode (einschließlich Gebietsdateien auf der Seite) ist jedoch langsamer, da ein weiteres Skript zum Laden erforderlich ist. (-_- !!!).
3. Falle ("Gotchas")
1. Währungssymbolfalle
Mit Angulars Währungsfilter können wir das Standardwährungssymbol aus dem Gebietsschemasdienst verwenden, und wir können auch benutzerdefinierte Währungssymbole bereitstellen. Wenn unsere App nur in einem Bereich verwendet wird, können wir uns auf das Standardwährungssymbol verlassen (festlegen). Wenn wir jedoch erwarten, dass Benutzer in anderen Regionen auch unsere App verwenden, sollten wir unsere benutzerdefinierten Währungssymbole bereitstellen, um sicherzustellen, dass der Benutzer den tatsächlichen Wert versteht.
Wenn wir beispielsweise den Währungsfilter binden möchten, um den Kontostand von 1.000 RMB anzuzeigen: {{1.000 | Währung}}, und unsere Anwendung verwendet derzeit En-US-Gebietsschema, dann wird "1.000,00 USD" angezeigt. Wenn Benutzer in einigen anderen Regionen (wie dem Festlandchina) unsere App besuchen, gibt der Browser des Benutzers die Region auf "Festlandchina" an, und der Restbetrag wird als "1000,00" angezeigt (ein sehr trauriger Fehler, Wechselkurs ...).
In diesem Beispiel müssen wir den Filter festlegen, indem wir das Standard -Währungssymbol umschreiben müssen, indem wir Währungssymbole als Parameter für den Währungsfilter (http://docs.angularjs.org/api/ng.filter: Trecurrency), den Parameter wie: USD $. Auf diese Weise ignoriert Angular alle Änderungen im Gebietsschema und zeigt immer wieder den Gleichgewicht als "USD 1000,00".
2. Übersetzungslängenfalle
Denken Sie daran, dass die Länge bei der Übersetzung von Saiten und Ereignisformaten stark variieren kann. Zum Beispiel wird "3. Juni 1977" "3 de Junio de 1977", wenn er ins Spanisch übersetzt wird. Natürlich kann es extremere Situationen geben. Wenn wir die Anwendung internationalisieren, müssen wir daher entsprechende CSS -Regeln einrichten und umfassende Tests durchführen, um sicherzustellen, dass die UI -Komponenten nicht zusammenbrechen (Varianten).
3. Zeitzone
Denken Sie daran, dass Angulars DateTime -Filter die vom Browser festgelegte Zeitzone verwendet. Daher zeigt dieselbe Anwendung unterschiedliche Zeitinformationen gemäß den Zeitzoneneinstellungen des Computers an und nicht die vom Entwickler in JavaScript oder Angular angegebene Zeitzone.