一、I18n and L10n in AngularJS
1. 什麼是I18n和L10n?
國際化(Internationalization),簡稱I18n,是讓產品開發在一個他們可以簡單地對產品進行語言、文化的本地化的方法的規範。本地化(Localization),簡稱L10n,一個使得應用、文本有適應特殊的文化或者語言市場的能力的規範。對於應用開發者,使一個程序國際化,意味著需要從程序中抽取所有字符串和其他區域較為特別的地方(例如日期和貨幣格式)。使一個程序本地化,意味著需要提供根據I18n抽取出來的塊進行翻譯和格式本地化。
2. 當前angular支持什麼級別的I18n、L10n?
當前,angular對datetime、number、currency過濾器提供I18n、L10n支持。
此外,angular通過ngPluralize directive(http://docs.angularjs.org/api/ng.directive:ngPluralize)支持多元化的本地化。
所有可本地化的控件都依賴於通過$locale服務管理的區域設定特性規則集。
為了讓讀者看到實際例子,官方准備了一些網頁例子,展示如何通過區域規則集合變量使用angular過濾器。我們可以在Github(https://github.com/angular/angular.js/tree/master/i18n/e2e)或者在angular開發包中的i18n/e2e中找到對應的例子。
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列表
二、在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文件。我們還需要配置我們的服務器提供正確的、符合期望的區域設置文件。
然而,第二種方式(包含區域設置文件到頁面中)會比較慢,因為需要多加載一個腳本。 (-_-!!!!)。
三、陷阱(“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的開發者指定的時區。