Blackie的失敗筆記

前言

今天帶大家學習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!