標籤：javascript angularjs $translateprovider 國際化
1. i18n和i10ni18n是Internationalization得縮寫，取第一個字母和最後一個字母，以及中間省略的字母數目，即i18n，類似的l10n是Localization得意思。
通常i18n是國際化的意思，就是在不改變源碼的情況下，通過某些簡單的配置就能適應不同的語言環境。
l10n，則是本地化的意思，是針對某一些語言進行定製化。
一般一個成熟的產品都要考慮國際化的方案，這樣未來的市場容易擴充，代碼也容易維護，因此大多也會考慮國際化的方案。
Angular-translate
angular-translate是一款應用簡單、上手容易的國際化服務。它提供了很多的特性：
1 以組件化的方式形成國際化
2 非同步載入國際化資料
3 使用messageFormat支援多元化
4 使用介面提高可擴充性
650) this.width=650;" src="http://images2015.cnblogs.com/blog/449064/201511/449064-20151123212305670-1306927159.png" width="748" height="561" style="border:none;margin:20px;" />
上面就是Angular-translate的抽象圖，可以看到它的最上面是指令，然後是過濾器，最下面是服務....
也就是說，transalte中指令其實是通過過濾器實現的，過濾器其實是通過服務實現的。
右邊的interpolator是修改器，即會根據國際化的資料修改展示的值。最下面是幾種非同步載入器，可以非同步載入國際化資料，提升應用的效能。最左邊提供了幾種持久化方案，如果應用需要記住使用者的選擇或者預設設定語言環境，則可以使用這種這種服務，需要額外安裝需要的包。
2. 實踐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/
深究AngularJS(2)——angular-translate詳解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
