本文轉自：http://www.tuicool.com/articles/zeymimB
隨着世界各地Web訪問量的增加，作為開發者的我們也在不斷讓應用國際化、本地化。當用戶訪問我們的應用時，他應該能夠在運行時立即切換語言環境。
鑒於我們正在開發的是AngularJS客戶端應用，尤其不希望用戶必須刷新頁面或者訪問一個完全不同的URL。當然，AngularJS可以很容易地調整那些國際化讀者的本機語言環境，或許通過為不同語言生成不同模板的方式為應用提供服務。
然而，這個過程可能會很麻煩，當我們想要改變應用的布局時會發生什么情況？每個獨立的模板都需要重新構建和部署。而這個過程應該是很簡單才對。
今天就來說說這個 “angular-translate”
你可以使用angular-translate來替代創建新模板的方式，這個AngularJS模塊為你的應用提供了i18n（國際化）服務。angular-translate要求創建一個JSON文件，它描述每種語言的翻譯數據。然后它只會在必要時從服務器延遲加載特定語言的翻譯數據。
angular-translate庫自帶了很多內置指令和過濾器，這讓我們的應用國際化變得簡單。我
們一起來學習一下。
-
安裝：安裝的方式有很多也很簡單，你如果使用nodejs的話你可以使用Bower（前端包管理器），如果你不熟悉可以google它的使用。當然最簡單的是你直接下載下來引入進來。但是你需要確保你的這個類庫放在angularjs之后，這個我想也不必多說了：
<script src="path/to/angular.js"></script> <script src="path/to/angular-translate.js"></script>最后一項要點是，在你的應用中必須將angular-translate聲明為一個加載依賴：
var app = angular.module('myApp', ['pascalprecht.translate']);現在已經准備好使用angular-translate組件來翻譯你的應用了。
-
使用方法：安裝好angular-translate后，將它聲明為應用的依賴，這樣才可以用它來翻譯應用程序的內容。首先，需要提供翻譯數據，這樣應用才能真正地說一種新的語言。這一步可以通過使用最新的$translateProvider服務配置$translate服務實現。培養應用使用一種新的語言很簡單。只需在應用上使用config函數，為應用提供不同的語言翻譯（比如英語、德語、希伯來語等）。首先，需要將$translateProvider注入到配置函數中，就像這樣：
angular.module('angularTranslateApp', ['pascalprecht.translate']) .config(function($translateProvider) { // 翻譯會放到這里 });要添加一種語言，必須讓$translateProvider找到一個翻譯表格，這是一個JSON對象，它包含將要翻譯為具體值的消息（鍵）。使用翻譯表格時允許我們將翻譯數據編寫為一個簡單的JSON文件，以便從遠程加載或者在編譯時設置，比如：
{ "name":"hello AngularJs" }在翻譯表格中，鍵（key）表示一個翻譯ID，而其值表示某種語言特定的翻譯數據。現在，先給應用添加一個翻譯表格。$translateProvider提供了一個叫做translations()的方法來處理它。
app.config(function($translateProvider) { $translateProvider.translations({ "headline": "Hello there, This is my awesome app!", "intro": "And it has i18n support!" }); });有了這個翻譯表格之后，應用就可以使用angular-translate了。由於這是在配置期間添加的翻譯表格，因此在angular-translate的組件被實例化時就能訪問到這個翻譯表格了。
先切換到應用的模板部分。要將鍵綁定給視圖很簡單，只需添加翻譯數據到視圖層即可。使用translate過濾器時，甚至不必接觸控制器或者服務，或者無需擔心視圖層：因為你可以從任何控制器或者服務中解耦翻譯邏輯，並且無需接觸業務邏輯代碼就能讓視圖可替換。
從根本上說，translate過濾器的工作原理就像這樣：
<h2>{{'HEADLINE' | translate }}</h2> <p>{{'INTRO_TEXT' | translate}}</p>現在可以翻譯視圖層中的內容了，並且還避免了翻譯邏輯污染控制器邏輯；然而，即使我們不使用angular-translate也能得到完全相同的結果，因為在這個示例應用中只涉及一種語言。
-
同時多個語言的支持：上面的代碼事例你已經看到一種語言的設置了，如果同時多個語言呢？我可能需要自己設置使用那個語言的場景，上面的就不再適合了，這個插件也是為我們提供這樣的功能的。話不多說了直接看代碼就一目了然了
app.config(function($translateProvider) { $translateProvider.translations('en', { HEADLINE: 'Hello there, This is my awesome app!', INTRO_TEXT: 'And it has i18n support!' }) .translations('de', { HEADLINE: 'Hey, das ist meine großartige App!', INTRO_TEXT: 'Und sie unterstzt mehrere Sprachen!' }); });ok，上面的例子非常的簡介明了，多個支持就這么的簡單。如果說你要動態設置呢？這個什么時候切換怎么搞呢？比如上面的代碼我進來是顯示那個呢？是英語還是德語呢？
要設置首選語言，你可以使用$translateProvider.preferredLanguage()方法。這個方法會告訴angular-translate哪種已注冊語言是應用默認應該使用的語言。它要求使用一個語言鍵值作為參數，這個參數指向某個翻譯表格。現在，我們來告訴應用應該使用英語作為默認語言：
app.config(function($translateProvider) { $translateProvider.translations('en', { HEADLINE: 'Hello there, This is my awesome app!', INTRO_TEXT: 'And it has i18n support!' }) .translations('de', { HEADLINE: 'Hey, das ist meine gro?artige App!', INTRO_TEXT: 'Und sie unterstzt mehrere Sprachen!' }); $translateProvider.preferredLanguage('en'); });ok，上面已經解決了我們在多個語言的時候默認使用那個的方法，那么動態設置呢？怎么搞呢我們繼續往下看，要在運行時切換到一種新語言，必須使用angular-translate的$translate服務。它有一個use()方法，這個方法要么返回一個當前正在使用的語言對應的語言鍵，或者傳遞一個語言鍵作為參數，這個參數會讓angular-translate使用該參數對應的語言。
為了感受一下如何在真實的應用中運用這一功能，我們可以添加兩個表示譯文的翻譯ID，稍后添加到HTML模板中的按鈕會用到這兩個ID：代碼片段還是上面的那個啊，
app.config(function($translateProvider) { $translateProvider.translations('en', { HEADLINE: 'Hello there, This is my awesome app!', INTRO_TEXT: 'And it has i18n support!' }) .translations('de', { HEADLINE: 'Hey, das ist meine gro?artige App!', INTRO_TEXT: 'Und sie unterstzt mehrere Sprachen!' }); $translateProvider.preferredLanguage('en'); });接下來，我們要使用$translate服務和它的use()方法在控制器上實現一個方法以便在運行時改變語言。為此，要將$translate服務注入到應用的控制器中，然后添加一個函數給它的$scope對象：
app.controller('TranslateController', function($translate, $scope) { $scope.changeLanguage = function(langKey) { $translate.use(langKey); } });接着，我們通過為每種語言添加一個按鈕的方式在HTML模板中反映這一變化。還必須在每個按鈕上設置一個ng-click指令在運行時調用改變語言的函數。
<div ng-controller="TranslateController"> <button ng-click="changeLanguage('de')" translate="BUTTON_TEXT_DE"></button> <button ng-click="changeLanguage('en')" translate="BUTTON_TEXT_EN"></button> </div>ok，這樣就把剛才我拋出的問題都解決了。
- 最后說下動態加載語言Angular的$http服務，我們可以通過$translateProvider的registerLoader方法來動態加載語言。首先，需要安裝angular-translate-loader-url擴展來設置loader-url服務，它要求有一個后端服務器通過處理lang參數的方式返回JSON數據。如果你已經有一個處理帶lang 參數路由的后端程序，那么可以像這樣使用
Bower安裝loader-url服務：
bower install angular-translate-loader-url
同樣你不想這么安裝你去github自己下載引入也是一樣的，同理需要引入到文件中放到angularjs的下面。
ok，具體的使用這里就不多說了，你可以自己搜索這個插件去看官方的具體文檔這里就不再贅述了。