[MAN鐵人賽]Day 14:AngularJS - Localization

摘要:[MAN鐵人賽]Day 14:AngularJS - Localization

前言

今天帶大家學習Localization,為APP提供設不同的區域資源,提供更好的使用經驗

Localization

這邊的Localization指的就是多國語言的支援與切換。

在開始前我們要先瞭解什麼是 I18N/L10N。

如果一個應用程式在設計時,可以在不修改應用程式的情況下,根據不同的使用者直接採用不同的語言、數字格式、日期格式等,這樣的設計考量稱為國際化(internationalization),簡稱i18n(因為internationalization有18個字母)。from

而 L10N 也是以一樣的方式,是 “localization” 的縮寫。

在AngularJS目前有支援I18N與L10N的為下面幾項條件

  • datetime
  • number
  • currency filters
  • ngPluralize directive

而在使用上要先提供locale rules給AngularJS才可以,設定方法有兩種:

  1. Pre-bundled rule sets

在產生angular.js檔案時就設定相關localization rules,以下為官網的德文範例

cat angular.js i18n/angular-locale_de-de.js > angular_de-de.js
  1. Including locale js script

而第二種方式則為透過不同的設定檔額外加載到頁面上

<script src="angular.js"></script>
<script src="i18n/angular-locale_de-de.js"></script>

目前所有AngularJS支援的語言檔案官方教學

範例

from

  1. 將 localizationservice.js 與 i18ntranslationfilter.js 加入至頁面
  2. 新增 'localization.service'與'localization.filters' 至你的 app的 dependency list中
  3. 新增一個資料夾放你的i18n與相關的resource-locale_default.js檔案
  4. 對每個所支援的語言都需要新建一個 resource檔案並以languageId-countryId的格式結尾 (如 resource-locale_en-us.js)
  5. 需要使用轉換時可透過 ng-bind="'HomeTitle' | i18n" or {{'HomeTitle' | i18n}} binding至HTML中

使用前請先確認上面五項即可,詳細的範例請看

*以上是直接推薦別人好的範例給大家參考

結語

透過localization rules我們就可以很輕鬆地轉換不同語系的資源檔給使用者看,提高使用者的使用經驗,Day-14 over!


如果覺得文章還不錯麻煩請在文章最上面給予推薦,你的支持是小弟繼續努力產出的動力!