對於一個用戶群面向全球的的應用來說，不得不考慮國際化的問題。當然，即便是剛剛起步的小應用，如果有心搞大，也應該提前設計國際化的方案。
本篇講述使用AngularJS構建的應用的簡單國際化方案，准確的說，是國際化服務....
i18n與l10n
i18n是Internationalization得縮寫，取第一個字母和最后一個字母，以及中間省略的字母數目，即i18n，類似的l10n是Localization得意思。
通常i18n是國際化的意思，就是在不改變源碼的情況下，通過某些簡單的配置就能適應不同的語言環境。
l10n，則是本地化的意思，是針對某一些語言進行定制化。
一般一個成熟的產品都要考慮國際化的方案，這樣未來的市場容易擴展，代碼也容易維護，因此大多也會考慮國際化的方案。
Angular-translate
angular-translate是一款應用簡單、上手容易的國際化服務。它提供了很多的特性：
1 以組件化的方式形成國際化
2 異步加載國際化數據
3 使用messageFormat支持多元化
4 使用接口提高可擴展性
上面就是Angular-translate的抽象圖，可以看到它的最上面是指令，然后是過濾器，最下面是服務....
也就是說，transalte中指令其實是通過過濾器實現的，過濾器其實是通過服務實現的。
右邊的interpolator是修改器，即會根據國際化的數據修改展示的值。最下面是幾種異步加載器，可以異步加載國際化數據，提升應用的性能。最左邊提供了幾種持久化方案，如果應用需要記住用戶的選擇或者默認設定語言環境，則可以使用這種這種服務，需要額外安裝需要的包。
實踐
1 下載
鑒於國內的網絡環境，還是推薦直接去官網下載zip壓縮包吧。當然如果網絡允許，也可以直接用bower下載。
2 引入
由於angular-translate需要使用angular，因此需要在引入angular-translate之前先引入angular。
如果直接使用<script>標簽，那么很簡單，只要保證angular在angular-translate之前引入即可：
<head> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> <script src="bower-angular-translate-2.8.1/angular-translate.js"></script> </head>
如果使用了requireJS這種異步加載服務，那么需要聲明angular-translate與angular的依賴關系，例如：
shim: { .... angular_translate:{ deps: ['angular'], exports: 'angular_translate' }, ....
3 注入
var app = angular.module("MyApp",['pascalprecht.translate']);
這樣angular后續加載的模塊都會注入一個translate服務，而不需要每個文件都聲明。
4 配置國際化方案
app.config(['$translateProvider',function($translateProvider){ $translateProvider.translations('en',{ 'TITLE':'Hello', 'FOO':'This is a paragraph' }); $translateProvider.translations('zh',{ 'TITLE':'你好', 'FOO':'這是一幅圖' }); $translateProvider.preferredLanguage('zh'); }]);
使用服務$translateProvider，配置多種語言方案，可以設置默認的語言。
當然，一般國際化都不會直接寫在上面的函數中，可以通過angular聲明一個模塊或者通過require引入一個自執行的方法，方法返回國際化的JSON對象，這樣直接引入：
$translateProvider.translations('en',i18n_en);
$translateProvider.translations('zh',i18n_zh);
5 使用國際化
<h1>{{ 'TITLE' | translate }}</h1>
<span translate="FOO"></span>
第一種是以過濾器的方式使用；第二種是指令的方式使用。
6 全部代碼
<!DOCTYPE html> <html ng-app="MyApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> <script src="bower-angular-translate-2.8.1/angular-translate.js"></script> </head> <body> <div> <h1>{{ 'TITLE' | translate }}</h1> <span translate="FOO"></span> </div> <script type="text/javascript"> var app = angular.module("MyApp",['pascalprecht.translate']); app.config(['$translateProvider',function($translateProvider){ $translateProvider.translations('en',{ 'TITLE':'Hello', 'FOO':'This is a paragraph' }); $translateProvider.translations('zh',{ 'TITLE':'你好', 'FOO':'這是一幅圖' }); $translateProvider.preferredLanguage('zh'); }]); </script> </body> </html>
參考
【1】AngularTranslate：https://angular-translate.github.io/