AngularJS 2 國際化支援

內容回顧

在之前的文章裡面，我們探討過 AngularJS 2 本地化支援上面的改變：

• 通過在需要翻譯的內容上新增 i18n HTML 屬性
• 利用ng - xi18n 工具抽取字串到標準的互動格式XLIFF檔案中
• 在翻譯完成後，Angular compiler 匯入翻譯的檔案，編譯生成Application 可以直接呼叫的Json 字串。

前兩點除提供基本的本地化支援外。在提高翻譯質量也提供了一些便利的介面：

• 上下文提示，UI 本地化最重要的一點是需要提供上下文資訊，目前行業裡面除了通過comments這樣的方式外，類似 YouTube 這樣的大公司已經可以做到上下文截圖和實時預覽（Live Preview）。當然AngularJS裡面也提供了相應的機制，給普通的message加comments，以便於翻譯人員理解上下文。

<p i18n="Label to show the maximum length of characters allowed in comments.">
  Limit is 255 characters.
</p>

• AngularJS 中如果message中含有佔位符，在提取後會被加上提示資訊：

<p>Limit is MAX_CHARS characters.</p>  //Placeholders MAX_CHARS comments: Angular Expression example: 255

•  AngularJS 支援複數和性別的：

{{numMessages, plural,
      =0 { You have no new messages }
      =1 { You have one new message }
   other { You have # new messages }
}}
 

{{friendGender, select,
       male { Invite him }
     female { Invite her }
      other { Invite them }
}}

• 本地化會帶來的layout問題，AngularJS 也不例外。 通常情況下，翻譯週期會很長。當翻譯檔案提交回來時，如果才發現翻譯導致的樣式問題，可能已經為時已晚或者說很多Bug修復起來沒有那麼容易。要解決這個問題可以在設計階段通過機器翻譯或者pseudo檢查出潛在的樣式相容性和擴充套件性問題，在送翻譯之前，就能先解決掉潛在的隱患。VMware 自主研發的UI Layout Sniffer 將開源，主要針對web application layout的高可用性。

說完基本的提取和可譯性優化外，還有一點是本地化編譯過程的選擇，根據應用的特點可以靈活的選擇編譯的方式。在AngularJS中提供了兩種編譯資原始檔的方式，JIT，應用啟動時編譯本地化的資原始檔，基本流程如下：

1. 確定當前使用者的Locale資訊。
2. 將翻譯檔案以字串常量的形式匯入。
3. 建立和插入翻譯供應器到JIT 編譯器。
4. 基於建立的供應器啟動引導應用。

<script>
  // Get the locale id somehow
  document.locale = 'de';

  // Map to the text plugin
  System.config({
    map: {
      text: 'systemjs-text-plugin.js'
    }
  });

  // Launch the app
  System.import('main.js').catch(function(err){ console.error(err); });
</script>

JIT 編譯器是動態的載入翻譯，在應用啟動時，完成所有的本地化編譯工作，如果應用的字串集合比較小，可能不會影響載入的效能，相反會造成應用的載入過慢。這個時候我們要考慮提前編譯（AOT），藉助 ngc 編譯的命令，提前編譯好每一個語言特定的資源包，而在應用啟動的時候，只需要確定locale，然後呼叫對應的資源包，省去了編譯的時間。例如：

./node_modules/.bin/ngc --i18nFile=./locale/messages.es.xlf --locale=es --i18nFormat=xlf

說了很多關於AngularJS 在本地化的支援，下面我們聊下AngularJS 2 在國際化支援上面的變化。

AngularJS 國際化

AngularJS2 在國際化支援，相對於AngularJS1.x 沒有太多的變化。 具體的實現我就不在這邊累述了，大家如果有需要可以參考之前的文章。AngularJS 國際化的關鍵點：

• Locale的獲取，根據應用場景不同選擇合適的使用者Locale獲取途徑，請參見之前的文章。
• 獲取Locale後，呼叫對應 angular-locale_{{locale}}.js，所有AngularJS能提供的國際化pattern都以字串的形式定義在此檔案種。例如de的NUMBER_FORMATS：

"NUMBER_FORMATS": {
    "CURRENCY_SYM": "\u20ac",
    "DECIMAL_SEP": ",",
    "GROUP_SEP": ".",
    "PATTERNS": [
      {
        "gSize": 3,
        "lgSize": 3,
        "maxFrac": 3,
        "minFrac": 0,
        "minInt": 1,
        "negPre": "-",
        "negSuf": "",
        "posPre": "",
        "posSuf": ""
      },
      {
        "gSize": 3,
        "lgSize": 3,
        "maxFrac": 2,
        "minFrac": 2,
        "minInt": 1,
        "negPre": "-",
        "negSuf": "\u00a0\u00a4",
        "posPre": "",
        "posSuf": "\u00a0\u00a4"
      }
    ]
  },

使用過程中，假如我們在HTML模板裡面定義：{{ 1000 | currency }}，編譯後拿到的貨幣符號就是locale service 裡面localeID 對應的currency 符號。所以要想了解AngularJS在國際化上面的侷限性，可以看看這個模式檔案，裡面還是缺少很多國際化元素的定義。