利用angular结合translate为项目实现国际化
前言
利用H5項目第一版本已經上線，話說有了第一期就有了第二期，這不要為第二期做準備了，老大發話第一件事就要利用Angular JS實現項目的國際化以及后續要借助這個框架來實現其他功能，好吧我表示沒怎么接觸過，這一個禮拜自己也對Angular基本的用法已經有了初步的了解以及熟悉，于是乎就有了這篇文章的產生。其實沒我什么事，我也是主動請纓說交給我，因為年底了嘛，也沒什么事，不急不忙的，一天也樂得清閑，還不給自己找點事做，而且還能在做的過程中能學到東西，何樂而不為呢！Angular已盛行一時，但請恕我見識少，一直認為Angular是屬于微軟旗下，結果。。。。你懂的，不說了，回到話題。
話題
找到了官網有關Angular的APi，看其最新版本是1.3.9，貌似還有比此版本更高的，無所謂了，只要不影響實現就ok，下載的包里面有國際化文件夾卻沒有APi，此時第一想到的去github上瞧瞧，果不其然還真有，搜索【Angular translate】即可，幸好英語還算基本過關，關鍵時刻找點東西還是挺有幫助的。下面一步一步來看，別著急 ，由淺入深。
第一步
兩個腳本文件必不可少，我喜歡用壓縮的，看個人愛好，angular.min.js，angular-translate.min.js
第二步
我們開始利用開啟angular裝逼模式。
【第一次嘗試】
<html ng-app="app"> <head><meta name="viewport" content="width=device-width" /><title>Index</title><script src="~/Scripts/angular.min.js"></script><script src="~/Scripts/angular-translate.min.js"></script><script type="text/javascript">var app = angular.module("app", ['pascalprecht.translate']);app.config(['$translateProvider', function ($translateProvider) {$translateProvider.translations('zh-cn', {'hello': '你好',});$translateProvider.preferredLanguage('zh-cn');}]);</script> </head> <body><h1>{{hello | translate}}</h1> </body> </html>上面我們要將hello翻譯成中文你好，結果什么都沒有，還沒出錯，是不是很神奇。
【注意】hello必須以字符串形式給出，要不然得不到你所預期。這么寫就對了{{"hello" | translate}}
輸出如下：
【第二次改進】
上面只是簡單的開始，老大過來看，不錯初步得到我想要的結果，我們項目就要實現這樣的結果，但是這結果不太令人滿意。
我們的場景是這樣的：我們有存儲各種語言的JSON文件，當頁面加載時，獲取用戶的所使用的語言，加載該JSON文件，里面存儲的是鍵值對，分別是對應的中文-》英文以及英文-》中文，若獲取用戶所使用的語言為英文你就將中文翻譯成英文。反之亦然，好吧，原來是將翻譯的鍵值對放在JSON文件，那就加載該文件不就得了，繼續做唄。
在translate源碼下載包里中找到loader-static-files腳本并引入該文件
?測試代碼，如下：
<html ng-app="app"> <head><meta name="viewport" content="width=device-width" /><title>Index</title><script src="~/Scripts/angular.min.js"></script><script src="~/Scripts/angular-translate.min.js"></script><script src="~/Scripts/loader-static-files.js"></script><script type="text/javascript">var app = angular.module("app", ['pascalprecht.translate']);app.config(['$translateProvider', function ($translateProvider) {$translateProvider.useStaticFilesLoader({prefix: '/il8n/',suffix: '.json'});$translateProvider.preferredLanguage('en-us');}]);</script> </head> <body><h1>{{"Hello" | translate}}</h1><h1>{{"xpy0928" | translate}}</h1> </body> </html>上述中【prefix】為存儲語言的JSON文件夾目錄，【suffix】為我們需要請求的文件的擴展名即JSON。而【$translateProvider.preferredLanguage('en-us')】則是請求il8n文件夾下名為【en-us】的JSON文件。
接下來我們運行試試，擦，尼瑪，給我原字符串輸出，說好的翻譯成中文呢？
再一看，擦，竟然沒找到zh-cn的JSON文件，如下圖！這個問題有點叼，開始我還以為是文件夾名【il8n】中的【l】寫成【1】。
?原來是無法請求JSON文件，必須添加映射，在VS 2013 express中添加對JSON的映射需進行如下操作：
（1）通過命令行到C:\Program Files(x86)\IIS Express文件夾
（2）繼續命令行：appcmd set config /section:staticContent /+[fileExtension='.json',mimeType='application/json']
?當然如果是發布在本地IIS中只需在Mime中添加映射以及應用配置程序中進行配置即可。
?最終翻譯成功如下：
【第三次升級終極版本】
做成這樣老大應該滿意了吧，趕緊欣喜的將老大叫過來大功告成啊，尼瑪，終于完事了，好，要的就是這效果，非常不錯，不過。。。心想難道這么做你還不滿意還是不行，結果又被挑到刺了。
挑刺話題中：如上所示，{{"Hello" | translate}}，這么綁定的話，如果頁面加載快還行，若是加載慢的話，那就把模板給顯示出來了，太丑了，你再想想有沒有辦法規避這種行為。哈哈，其實我早就想到了，這么綁定會出現他擔心的那個問題，我就是賣個關子而已，裝裝逼也是可以的嘛。用【ng-bind】解決不就ok了嗎。心里早就有數，來繼續走你。
分析中：[ng-bind]只能綁定在元素的屬性中，例如這樣<span ng-bind="text"></span>，咦，貌似不對，要是顯示html內容，那該怎么辦，強大的IDE【vs】的智能提示，顯示有[ng-bind-html]，令人比較滿意的分析。馬上試試看。
更改為如下：
<h1 ng-bind-html="{{"Hello" | translate}}"></h1><h1 ng-bind-html="{{"xpy0928" | translate}}"></h1>結果出錯，看錯誤很明顯是語法用錯了，試試下面的
<h1 ng-bind-html="'Hello' | translate"></h1> <h1 ng-bind-html="'xpy0928' | translate"></h1>這下也不行，不過不是語法的問題，如下圖所示：
也可能出現如下錯誤：
[$sce:unsafe] Attempting to use an unsafe value in a safe context結果一查資料卻是要添加一個【angular-sanitize.min.js】腳本文件，并且依賴于它。繼續添加此腳本文件看看。結果如我預期。
【注意】添加此腳本文件之后，要在模塊中對此腳本文件進行依賴。如下：
var app = angular.module("app", ['pascalprecht.translate', 'ngSanitize']);
?我們反過來將中文轉換為因為試試看，進行如下修改
$translateProvider.preferredLanguage('en-us');<h1 ng-bind-html="'你好' | translate"></h1> <h1 ng-bind-html="'博客園' | translate"></h1>結果顯然是成功的，如下：
總結?
利用angular進行國際化轉換時利用【ng-bind-html】來進行語言的翻譯是接近幾乎比較完美的方案，不會像利用【{{}}】模式，當頁面加載緩慢時導致頁面太丑。但是利用【ng-bind-html】還是有點問題，，當刷新總有一個切換的過程，比如從中文【你好】切換到英文【hello】，這樣過程你是可以看見的，暫時未想到更好的解決方案，期待你更好的解決方案。整個轉換個過程必須要引用以下四個腳本文件。
<script src="~/Scripts/angular.min.js"></script><script src="~/Scripts/angular-translate.min.js"></script><script src="~/Scripts/loader-static-files.js"></script><script src="~/Scripts/angular-sanitize.min.js"></script>參考資料
【translate api】：translate api
【translate new letter】：translate new letter
【angular sanitize/ng-bind-html not working】：angular sanitize/ng-bind-html not working
【translate download】：translate github
轉載于:https://www.cnblogs.com/CreateMyself/p/5149374.html
總結
以上是生活随笔為你收集整理的利用angular结合translate为项目实现国际化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用pngquant来压缩png资源缩小
- 下一篇： bzoj1196 [HNOI2006]公