AngularJs學習筆記--I18n/L10n

時間 2019-11-16

標籤 angularjs 學習筆記 i18n l10n 欄目 AngularJS 简体版

原文原文鏈接

原版地址：http://code.angularjs.org/1.0.2/docs/guide/i18njavascript

1、I18n and L10n in AngularJShtml

1. 什麼是I18n和L10n?java

　　國際化（Internationalization），簡稱I18n，是讓產品開發在一個他們能夠簡單地對產品進行語言、文化的本地化的方法的規範。本地化（Localization），簡稱L10n，一個使得應用、文本有適應特殊的文化或者語言市場的能力的規範。對於應用開發者，使一個程序國際化，意味着須要從程序中抽取全部字符串和其餘區域較爲特別的地方（例如日期和貨幣格式）。使一個程序本地化，意味着須要提供根據I18n抽取出來的塊進行翻譯和格式本地化。git

2. 當前angular支持什麼級別的I18n、L10n？angularjs

　　當前，angular對datetime、number、currency過濾器提供I18n、L10n支持。github

　　此外，angular經過ngPluralize directive（http://docs.angularjs.org/api/ng.directive:ngPluralize）支持多元化的本地化。express

　　全部可本地化的控件都依賴於經過$locale服務管理的區域設定特性規則集。bootstrap

　　爲了讓讀者看到實際例子，官方準備了一些網頁例子，展現如何經過區域規則集合變量使用angular過濾器。咱們能夠在Github（https://github.com/angular/angular.js/tree/master/i18n/e2e）或者在angular開發包中的i18n/e2e中找到對應的例子。api

3. 什麼是區域id（locale id）?瀏覽器

　　locale是一個特定地理、政治、文化的地區。最經常使用的locale id 由兩部分組成：語言代碼和國家代碼。例如，en-US，en-AU，zh-CN都是有效的locale ID，都包含語言代碼和國家代碼。由於在locale ID中指定的國家編碼是可選的，locale ID，例如en、zh和sk都是有效的。查看網站ICU（http://userguide.icu-project.org/locale），那裏有更多關於locale ID的信息。

4. angular支持的locale

　　angular將數字、日期時間格式的規則集合分開放在不一樣的文件中，每一個文件獨有一個區域。咱們能夠在這裏（https://github.com/angular/angular.js/tree/master/i18n/locale）找到當前支持的locale列表

2、在angular中定製locale規則

　　在angular中定製locale有兩個方式：

　　1. 預先綁定的規則集合（Pre-bundled rule sets）

　　咱們能夠經過將locale-specific的文件鏈接到angular.js或者angular.min.js以後，實現將angular和預先綁定（pre-bundle）指望的locale文件。

　　例如，在*nix中，咱們能夠經過如下命令來建立一個包含德國區域本地化規則的文件的angular.js文件：

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

　　當從應用程序使用angular_de-ge.js腳本代替通常的angular.js腳本開始，angular開始自動預先配置（pre-configured）德國地區的本地化規則。

　　2. 包含locale js腳本到index.html頁

　　咱們也能夠包含指定區域的js文件到頁面當中。例如，若是一個客戶端須要德國區域文件，咱們能夠提供相似如下的頁面：

<html ng-app>
    <head>
    ...
    <script src="angular.js"></script>
    <script src="i18n/angular-locale_de-ge.js"></script>
    ...
    </head>
    ...
 </html>

　　上述兩種方法，都要求咱們爲本地化而提供各個區域的不一樣的index.html頁或者js文件。咱們還須要配置咱們的服務器提供正確的、符合指望的區域設置文件。

然而，第二種方式（包含區域設置文件到頁面中）會比較慢，由於須要多加載一個腳本。（-_-!!!!）。

3、陷阱（「Gotchas」）

　　1. 貨幣符號陷阱

　　angular的currency filter容許咱們從locale service中使用默認的貨幣符號，咱們也能夠提供自定義的貨幣符號。若是咱們的應用只在一個區域中使用，那麼咱們能夠依賴（設置）默認貨幣符號。可是，若是咱們預料到其餘區域的用戶也會使用到咱們的應用的話，咱們應該提供咱們自定義的貨幣符號，確保用戶可以明白實際的值。

　　例如，若是咱們想經過綁定currency filter來顯示帳戶餘額爲1000元：{{ 1000 | currency}}，咱們的應用當前是使用en-US的區域設置，那麼將會顯示」$1000.00」。然而，若是一些其餘區域（例如中國大陸）的用戶訪問咱們的應用，用戶瀏覽器會指定區域設置爲「中國大陸」，而後餘額將顯示爲「￥1000.00」（很悲催的錯誤啊，匯率...）。

　　在這個例子中，當咱們須要設置filter的時候，咱們須要經過對currency filter（http://docs.angularjs.org/api/ng.filter:currency）提供貨幣符號做爲參數來重寫默認貨幣符號，參數如：USD$。這樣，angular會忽略任何區域設置的變化，一直顯示餘額爲「USD$1000.00」。

2. 翻譯長度陷阱

　　記住，翻譯字符串、事件格式時，長度的變化可能會很大。例如「June 3, 1977」翻譯爲西班牙語時變爲「3 de junio de 1977」。固然，還可能會有更加極端的情況。所以，當咱們對應用進行國際化時，咱們須要設置相應的CSS規則而且進行全面測試，確保UI組件不會折行（變型）。

3. 時區

　　記住，angular的datetime filter是使用瀏覽器端設置的時區的。因此，同一個應用將根據運行應用的計算機的時區設置而顯示不一樣的時間信息，而不是取決於javascript或者angular的開發者指定的時區。