欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJs 國際化（I18n/L10n）詳解

 更新時(shí)間：2016年09月01日 16:56:09   作者：Lcllao  
本文主要介紹AngularJs 國際化的知識，這里整理了詳細(xì)的資料來講解國際化，有需要的小伙伴可以參考下

一、I18n and L10n in AngularJS

1. 什么是I18n和L10n?

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

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

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

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

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

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

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

　　locale是一個(gè)特定地理、政治、文化的地區(qū)。最常用的locale id 由兩部分組成：語言代碼和國家代碼。例如，en-US，en-AU，zh-CN都是有效的locale ID，都包含語言代碼和國家代碼。因?yàn)樵趌ocale ID中指定的國家編碼是可選的，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ī)則集合分開放在不同的文件中，每個(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）

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

　　例如，在*nix中，我們可以通過以下命令來創(chuàng)建一個(gè)包含德國區(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腳本開始，angular開始自動預(yù)先配置（pre-configured）德國地區(qū)的本地化規(guī)則。

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

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

<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頁或者js文件。我們還需要配置我們的服務(wù)器提供正確的、符合期望的區(qū)域設(shè)置文件。

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

三、陷阱（“Gotchas”）

　　1. 貨幣符號陷阱

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

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

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

2. 翻譯長度陷阱

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

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的開發(fā)者指定的時(shí)區(qū)。

相關(guān)文章

最新評論