一、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的開發人員指定的時區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
