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