1。ANGULARJSのI18NおよびL10N
1。I18NとL10Nとは何ですか?
I18Nと呼ばれる国際化は、製品言語と文化を単純にローカライズできる方法で製品開発の標準です。 L10Nと呼ばれるローカリゼーションは、アプリケーションとテキストが特別な文化的または言語市場に適応できるようにする標準です。アプリケーション開発者の場合、プログラムを国際化することは、すべての文字列やその他の領域をより特別なプログラム(日付や通貨形式など)から抽出する必要があることを意味します。プログラムのローカライズとは、i18nから抽出されたブロックの翻訳と形式のローカリゼーションを提供することを意味します。
2.現在、AngularによってサポートされているI18NおよびL10Nのレベルは何ですか?
現在、Angularは、DateTime、Number、およびCurrencyフィルターのI18NおよびL10Nのサポートを提供しています。
さらに、Angularは、ngpluralizeディレクティブ(http://docs.angularjs.org/api/ng.directive:ngpluralize)を通じて多様なローカリゼーションをサポートします。
すべてのローカライズ可能なコントロールは、$ Locale Serviceを通じて管理されているロケール設定機能ルールセットに依存しています。
読者に実際の例を見るために、オフィシャルはいくつかのWebページの例を準備して、Angularフィルターを使用して地域のルールを介して変数を収集する方法を示しています。 Github(https://github.com/angular/angular.js/tree/master/i18n/e2e)または角度開発パッケージのi18n/e2eで対応する例を見つけることができます。
3.地域IDとは何ですか?
ロケールは、特定の地理的、政治的、文化的地域です。最も一般的に使用されるロケールIDは、言語コードと国コードの2つの部分で構成されています。たとえば、EN-US、EN-AU、およびZH-CNはすべて有効なロケールIDであり、すべて言語コードとカントリーコードが含まれています。 Locale IDで指定されたエンコードはオプションであるため、EN、ZH、SKなどのロケールIDはすべて有効です。 WebサイトICU(http://userguide.icu-project.org/locale)をチェックしてください。
4。角度サポートされたロケール
Angularは、異なるファイルの数字、日付、時刻形式のルールのセットを分離します。各ファイルには一意の領域があります。現在サポートされているロケールリストはここで見つけることができます(https://github.com/angular/angular.js/tree/master/i18n/locale)
2. Angularでロケールルールをカスタマイズします
Angularでロケールをカスタマイズする方法は2つあります。
1。事前にバンドルされたルールセット
ロケール固有のファイルをAngular.jsまたはAngular.min.jsに接続することにより、予想されるロケールファイルを実装できます。
たとえば、 *nixでは、次のコマンドを介してドイツの地域ローカリゼーションルールを含むAngular.jsファイルを作成できます。
cat angular.js i18n/angular-locale_de-ge.js> angular_de-ge.js
アプリケーションが一般的なAngular.jsスクリプトの代わりにAngular_de-ge.jsスクリプトを使用すると、Angularはドイツで自動的に事前に構成された(事前に構成された)ローカリゼーションルールを開始します。
2。index.htmlページにロケールJSスクリプトを含めます
指定された領域にJSファイルをページに含めることもできます。たとえば、クライアントがドイツの地域ファイルを必要とする場合、次のようなページを提供できます。
<html ng-app> <head> ... <script src = "angular.js"> </script> <script src = "i18n/angular-locale_de-ge.js"> </script> ... </head> ... </html>
上記の両方の方法では、ローカリゼーションのために各領域で異なるindex.htmlページまたはJSファイルを提供する必要があります。また、正しい、望ましいロケールファイルを提供するようにサーバーを構成する必要があります。
ただし、2番目のメソッド(ページへのロケールファイルを含む)は、1つのスクリプトが読み込まれる必要があるため、遅くなります。 (-_- !!!)。
3。トラップ( "Gotchas")
1。通貨シンボルトラップ
Angularの通貨フィルターを使用すると、Locale Serviceのデフォルトの通貨記号を使用できます。また、カスタム通貨シンボルを提供することもできます。アプリが1つの領域でのみ使用されている場合は、デフォルトの通貨シンボルに依存(設定)に依存できます。ただし、他の地域のユーザーもアプリを使用することを期待する場合は、ユーザーが実際の値を理解していることを確認するためにカスタム通貨シンボルを提供する必要があります。
たとえば、通貨フィルターをバインドしてアカウントの残高をRMB 1,000を表示する場合:{{1,000 | Currency}}、および当社のアプリケーションは現在EN-USロケールを使用しています。その後、「$ 1,000.00」が表示されます。ただし、他の一部の地域(中国本土など)のユーザーがアプリにアクセスした場合、ユーザーのブラウザは「中国本土」への地域設定を指定し、バランスは「¥ 1000.00」(非常に悲しいエラー、為替レート...)として表示されます。
この例では、フィルターを設定する必要がある場合は、通貨シンボルをパラメーターとして通貨フィルターに提供することにより、デフォルトの通貨記号を書き換える必要があります(http://docs.angularjs.org/api/ng.filter:currency)、USD $などのパラメーター。このようにして、Angularはロケールの変化を無視し、バランスを「1000.00米ドル」と表示し続けます。
2。翻訳長さトラップ
文字列やイベント形式を翻訳する場合、長さは大きく異なる場合があることを忘れないでください。たとえば、「1977年6月3日」は、スペイン語に翻訳されたときに「3 de junio de 1977」になります。もちろん、より極端な状況があるかもしれません。したがって、アプリケーションを国際化する場合、対応するCSSルールを設定し、UIコンポーネントが崩壊しないように包括的なテストを実施する必要があります(バリアント)。
3。タイムゾーン
AngularのDateTimeフィルターは、ブラウザによって設定されたタイムゾーンを使用していることを忘れないでください。したがって、同じアプリケーションは、JavaScriptまたはAngularの開発者が指定したタイムゾーンではなく、アプリケーションを実行しているコンピューターのタイムゾーン設定に従って異なる時間情報を表示します。