快捷導(dǎo)航

AngularJs 國(guó)際化（I18n/L10n）詳解

更新時(shí)間：2016年09月01日 16:56:09 作者：Lcllao

本文主要介紹AngularJs 國(guó)際化的知識(shí)，這里整理了詳細(xì)的資料來(lái)講解國(guó)際化，有需要的小伙伴可以參考下

一、I18n and L10n in AngularJS

1. 什么是I18n和L10n?

　　國(guó)際化（Internationalization），簡(jiǎn)稱(chēng)I18n，是讓產(chǎn)品開(kāi)發(fā)在一個(gè)他們可以簡(jiǎn)單地對(duì)產(chǎn)品進(jìn)行語(yǔ)言、文化的本地化的方法的規(guī)范。本地化（Localization），簡(jiǎn)稱(chēng)L10n，一個(gè)使得應(yīng)用、文本有適應(yīng)特殊的文化或者語(yǔ)言市場(chǎng)的能力的規(guī)范。對(duì)于應(yīng)用開(kāi)發(fā)者，使一個(gè)程序國(guó)際化，意味著需要從程序中抽取所有字符串和其他區(qū)域較為特別的地方（例如日期和貨幣格式）。使一個(gè)程序本地化，意味著需要提供根據(jù)I18n抽取出來(lái)的塊進(jìn)行翻譯和格式本地化。

2. 當(dāng)前angular支持什么級(jí)別的I18n、L10n？

　　當(dāng)前，angular對(duì)datetime、number、currency過(guò)濾器提供I18n、L10n支持。

　　此外，angular通過(guò)ngPluralize directive（http://docs.angularjs.org/api/ng.directive:ngPluralize）支持多元化的本地化。

　　所有可本地化的控件都依賴(lài)于通過(guò)$locale服務(wù)管理的區(qū)域設(shè)定特性規(guī)則集。

　　為了讓讀者看到實(shí)際例子，官方準(zhǔn)備了一些網(wǎng)頁(yè)例子，展示如何通過(guò)區(qū)域規(guī)則集合變量使用angular過(guò)濾器。我們可以在Github（https://github.com/angular/angular.js/tree/master/i18n/e2e）或者在angular開(kāi)發(fā)包中的i18n/e2e中找到對(duì)應(yīng)的例子。

3. 什么是區(qū)域id（locale id）?

　　locale是一個(gè)特定地理、政治、文化的地區(qū)。最常用的locale id 由兩部分組成：語(yǔ)言代碼和國(guó)家代碼。例如，en-US，en-AU，zh-CN都是有效的locale ID，都包含語(yǔ)言代碼和國(guó)家代碼。因?yàn)樵趌ocale ID中指定的國(guó)家編碼是可選的，locale ID，例如en、zh和sk都是有效的。查看網(wǎng)站ICU（http://userguide.icu-project.org/locale），那里有更多關(guān)于locale ID的信息。

4. angular支持的locale

　　angular將數(shù)字、日期時(shí)間格式的規(guī)則集合分開(kāi)放在不同的文件中，每個(gè)文件獨(dú)有一個(gè)區(qū)域。我們可以在這里（https://github.com/angular/angular.js/tree/master/i18n/locale）找到當(dāng)前支持的locale列表

二、在angular中定制locale規(guī)則

　　在angular中定制locale有兩個(gè)方式：

　　1. 預(yù)先綁定的規(guī)則集合（Pre-bundled rule sets）

　　我們可以通過(guò)將locale-specific的文件連接到angular.js或者angular.min.js之后，實(shí)現(xiàn)將angular和預(yù)先綁定（pre-bundle）期望的locale文件。

　　例如，在*nix中，我們可以通過(guò)以下命令來(lái)創(chuàng)建一個(gè)包含德國(guó)區(qū)域本地化規(guī)則的文件的angular.js文件：

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

　　當(dāng)從應(yīng)用程序使用angular_de-ge.js腳本代替一般的angular.js腳本開(kāi)始，angular開(kāi)始自動(dòng)預(yù)先配置（pre-configured）德國(guó)地區(qū)的本地化規(guī)則。

　　2. 包含locale js腳本到index.html頁(yè)

　　我們也可以包含指定區(qū)域的js文件到頁(yè)面當(dāng)中。例如，如果一個(gè)客戶(hù)端需要德國(guó)區(qū)域文件，我們可以提供類(lèi)似以下的頁(yè)面：

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

　　上述兩種方法，都要求我們?yōu)楸镜鼗峁└鱾€(gè)區(qū)域的不同的index.html頁(yè)或者js文件。我們還需要配置我們的服務(wù)器提供正確的、符合期望的區(qū)域設(shè)置文件。

然而，第二種方式（包含區(qū)域設(shè)置文件到頁(yè)面中）會(huì)比較慢，因?yàn)樾枰嗉虞d一個(gè)腳本。（-_-!!!!）。

三、陷阱（“Gotchas”）

　　1. 貨幣符號(hào)陷阱

　　angular的currency filter允許我們從locale service中使用默認(rèn)的貨幣符號(hào)，我們也可以提供自定義的貨幣符號(hào)。如果我們的應(yīng)用只在一個(gè)區(qū)域中使用，那么我們可以依賴(lài)（設(shè)置）默認(rèn)貨幣符號(hào)。但是，如果我們預(yù)料到其他區(qū)域的用戶(hù)也會(huì)使用到我們的應(yīng)用的話(huà)，我們應(yīng)該提供我們自定義的貨幣符號(hào)，確保用戶(hù)能夠明白實(shí)際的值。

　　例如，如果我們想通過(guò)綁定currency filter來(lái)顯示賬戶(hù)余額為1000元：{{ 1000 | currency}}，我們的應(yīng)用當(dāng)前是使用en-US的區(qū)域設(shè)置，那么將會(huì)顯示”$1000.00”。然而，如果一些其他區(qū)域（例如中國(guó)大陸）的用戶(hù)訪(fǎng)問(wèn)我們的應(yīng)用，用戶(hù)瀏覽器會(huì)指定區(qū)域設(shè)置為“中國(guó)大陸”，然后余額將顯示為“￥1000.00”（很悲催的錯(cuò)誤啊，匯率...）。

　　在這個(gè)例子中，當(dāng)我們需要設(shè)置filter的時(shí)候，我們需要通過(guò)對(duì)currency filter（http://docs.angularjs.org/api/ng.filter:currency）提供貨幣符號(hào)作為參數(shù)來(lái)重寫(xiě)默認(rèn)貨幣符號(hào)，參數(shù)如：USD$。這樣，angular會(huì)忽略任何區(qū)域設(shè)置的變化，一直顯示余額為“USD$1000.00”。

2. 翻譯長(zhǎng)度陷阱

　　記住，翻譯字符串、事件格式時(shí)，長(zhǎng)度的變化可能會(huì)很大。例如“June 3, 1977”翻譯為西班牙語(yǔ)時(shí)變?yōu)椤? de junio de 1977”。當(dāng)然，還可能會(huì)有更加極端的狀況。因此，當(dāng)我們對(duì)應(yīng)用進(jìn)行國(guó)際化時(shí)，我們需要設(shè)置相應(yīng)的CSS規(guī)則并且進(jìn)行全面測(cè)試，確保UI組件不會(huì)折行（變型）。

3. 時(shí)區(qū)

　　記住，angular的datetime filter是使用瀏覽器端設(shè)置的時(shí)區(qū)的。所以，同一個(gè)應(yīng)用將根據(jù)運(yùn)行應(yīng)用的計(jì)算機(jī)的時(shí)區(qū)設(shè)置而顯示不同的時(shí)間信息，而不是取決于javascript或者angular的開(kāi)發(fā)者指定的時(shí)區(qū)。

您可能感興趣的文章: