淺析 AngularJS 全球化最優方案（六）
阿新 • • 發佈：2019-01-07
本節是最後一節關於AngularJS的國際化和本地化方案討論，具體會和大家聊下目前有哪些第三方庫，以及優缺點。
首先談談國際化，AngularJS自帶國際化支援，提供了一些語言的國際化資原始檔檔案，具體的覆蓋面，大家可以去官網查詢。
下面聊聊怎麼使用這些資原始檔，一般來說會分靜態載入和動態載入，靜態載入可以使用預繫結、單獨載入。預繫結是將國際化資原始檔和 AngularJS 庫檔案進行合成，比如在Linux 裡面可以使用：
cat angular.js i18n/angular-locale_de-ge.js > angular_de-ge.js
也可以單獨載入，在index.html裡面新增引用：
<html ng-app>
<head>
….
<script src="angular.js"></script>
<script src="i18n/angular-locale_de-ge.js"></script>
….
</head>
</html>除靜態載入，當然也可以使用 grunt 做模板渲染。但是通常情況下，會使用動態載入方式：
<!-- i18n --> <script type="text/javascript" src="lib/angular/i18n/<%= (new com.hero.admin.ui.i18n.JSResourceResolver("lib/angular/i18n","angular-locale_")).geti18NFile(request) %>"> </script>
引入AngularJS提供的資原始檔後，在具體的實現中可以使用過濾器對原始資料進行國際化處理：
以上是國際化部分，基本的國際化點這樣實現是沒有問題的，如果有一些特殊的國際化點，AngularJS 國際化資原始檔沒有提供，可以參考包含IBM cldr的相關JS庫。<!document html> <html ng-app> <head> <meta charset="utf-8"> <title>locale test</title> <script src="../../build/angular.js"></script> <script src="../../build/i18n/angular-locale_de.js"></script> <script> function AppCntl($scope){ $scope.input = 234234443432; } </script> </head> <body ng-controller="AppCntl"> <input type="text" ng-model="input"><br> date: {{input | date:"medium"}}<br> date: {{input | date:"longDate"}}<br> number: {{input | number}}<br> currency: {{input | currency }} </body> </html>
AngularJS 在本地化的支援中，常用的第三方庫有angular i18n, angular-translate 和angular-gettext。這幾個庫的特點如下：
Angular i18n：
- 在專案設計的時候就需要考慮到國際化。
- 此庫是絕對的 “angular way”，100%的國際化處理都是在前端完成。
- 使用i18n的過濾器和指令。
- 使用內聯替換
- 支援單複數
- 支援性別區分的替換
- 有第三方翻譯流程處理工具：grunt-angular-localization
- https://docs.angularjs.org/guide/i18n
- https://www.youtube.com/watch?v=6I_rONDvHq0
Angular-translate：
- 基於key-value模式的本地化方式
- 使用國際化的過濾器和指令
- 插值服務，Non-angular style，使用變數替換
- 支援單複數
- 可以獨立獲取瀏覽器 Locale，但存在Bug
- 支援非同步載入和同步載入
- https://angular-translate.github.io/
- https://www.youtube.com/watch?v=9CWifOK_Wi8
- 自動使用value當做字串的key
- 提供指令碼自動採取需要翻譯的字串
- 插值服務，使用angular style
- 支援指令和過濾器以及直接使用JS呼叫服務
- 支援單複數
- 支援上下文翻譯
- 支援添加註釋
- 第三方工具較多
- https://angular-gettext.rocketeer.be/
- source 中有換行的情況，抽取後使用了grunt 的指令碼htmlmin壓縮了html檔案，這樣會導致呼叫時key匹配不上的問題，解決方案是儘量使用規範的html書寫格式，刪除不必要的換行。
- "> <"等字元包含在文字中時，提取到po檔案時會自動轉成明文“<>”，這樣是翻譯完後，會導致key無法匹配的問題，解決方案是做升級，在高版本中已經有相應的機制，會在替換函式裡面加轉義機制，如果是老版本只能重寫此函式，但是建議升級，不要本地維護這個庫。