快捷導(dǎo)航

淺析如何利用angular結(jié)合translate為項(xiàng)目實(shí)現(xiàn)國(guó)際化

更新時(shí)間：2016年12月08日 10:03:15 作者：JeffckyWang

利用angular進(jìn)行國(guó)際化轉(zhuǎn)換時(shí)利用【ng-bind-html】來(lái)進(jìn)行語(yǔ)言的翻譯是接近幾乎比較完美的方案，不會(huì)像利用【{{}}】模式，當(dāng)頁(yè)面加載緩慢時(shí)導(dǎo)致頁(yè)面太丑。本文對(duì)其實(shí)現(xiàn)方法進(jìn)行介紹，有需要的朋友可以看下

前言

利用H5項(xiàng)目第一版本已經(jīng)上線，話(huà)說(shuō)有了第一期就有了第二期，這不要為第二期做準(zhǔn)備了，老大發(fā)話(huà)第一件事就要利用Angular JS實(shí)現(xiàn)項(xiàng)目的國(guó)際化以及后續(xù)要借助這個(gè)框架來(lái)實(shí)現(xiàn)其他功能，好吧我表示沒(méi)怎么接觸過(guò)，這一個(gè)禮拜自己也對(duì)Angular基本的用法已經(jīng)有了初步的了解以及熟悉，于是乎就有了這篇文章的產(chǎn)生。其實(shí)沒(méi)我什么事，我也是主動(dòng)請(qǐng)纓說(shuō)交給我，因?yàn)槟甑琢寺?，也沒(méi)什么事，不急不忙的，一天也樂(lè)得清閑，還不給自己找點(diǎn)事做，而且還能在做的過(guò)程中能學(xué)到東西，何樂(lè)而不為呢！Angular已盛行一時(shí)，但請(qǐng)恕我見(jiàn)識(shí)少，一直認(rèn)為Angular是屬于微軟旗下，結(jié)果。。。。你懂的，不說(shuō)了，回到話(huà)題。

話(huà)題

找到了官網(wǎng)有關(guān)Angular的APi，看其最新版本是1.3.9，貌似還有比此版本更高的，無(wú)所謂了，只要不影響實(shí)現(xiàn)就ok，下載的包里面有國(guó)際化文件夾卻沒(méi)有APi，此時(shí)第一想到的去github上瞧瞧，果不其然還真有，搜索【Angular translate】即可，幸好英語(yǔ)還算基本過(guò)關(guān)，關(guān)鍵時(shí)刻找點(diǎn)東西還是挺有幫助的。下面一步一步來(lái)看，別著急，由淺入深。

第一步

兩個(gè)腳本文件必不可少，我喜歡用壓縮的，看個(gè)人愛(ài)好，angular.min.js，angular-translate.min.js

第二步

我們開(kāi)始利用開(kāi)啟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é)果什么都沒(méi)有，還沒(méi)出錯(cuò)，是不是很神奇。

【注意】hello必須以字符串形式給出，要不然得不到你所預(yù)期。這么寫(xiě)就對(duì)了{(lán){"hello" | translate}}

輸出如下：

【第二次改進(jìn)】

上面只是簡(jiǎn)單的開(kāi)始，老大過(guò)來(lái)看，不錯(cuò)初步得到我想要的結(jié)果，我們項(xiàng)目就要實(shí)現(xiàn)這樣的結(jié)果，但是這結(jié)果不太令人滿(mǎn)意。

我們的場(chǎng)景是這樣的：我們有存儲(chǔ)各種語(yǔ)言的JSON文件，當(dāng)頁(yè)面加載時(shí)，獲取用戶(hù)的所使用的語(yǔ)言，加載該JSON文件，里面存儲(chǔ)的是鍵值對(duì)，分別是對(duì)應(yīng)的中文-》英文以及英文-》中文，若獲取用戶(hù)所使用的語(yǔ)言為英文你就將中文翻譯成英文。反之亦然，好吧，原來(lái)是將翻譯的鍵值對(duì)放在JSON文件，那就加載該文件不就得了，繼續(xù)做唄。

在translate源碼下載包里中找到loader-static-files腳本并引入該文件

測(cè)試代碼，如下：

 <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】為存儲(chǔ)語(yǔ)言的JSON文件夾目錄，【suffix】為我們需要請(qǐng)求的文件的擴(kuò)展名即JSON。而【$translateProvider.preferredLanguage('en-us')】則是請(qǐng)求il8n文件夾下名為【en-us】的JSON文件。

接下來(lái)我們運(yùn)行試試，擦，尼瑪，給我原字符串輸出，說(shuō)好的翻譯成中文呢？

再一看，擦，竟然沒(méi)找到zh-cn的JSON文件，如下圖！這個(gè)問(wèn)題有點(diǎn)叼，開(kāi)始我還以為是文件夾名【il8n】中的【l】寫(xiě)成【1】。

原來(lái)是無(wú)法請(qǐng)求JSON文件，必須添加映射，在VS 2013 express中添加對(duì)JSON的映射需進(jìn)行如下操作：

（1）通過(guò)命令行到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)行配置即可。

最終翻譯成功如下：

【第三次升級(jí)終極版本】

做成這樣老大應(yīng)該滿(mǎn)意了吧，趕緊欣喜的將老大叫過(guò)來(lái)大功告成啊，尼瑪，終于完事了，好，要的就是這效果，非常不錯(cuò)，不過(guò)。。。心想難道這么做你還不滿(mǎn)意還是不行，結(jié)果又被挑到刺了。

挑刺話(huà)題中：如上所示，{{"Hello" | translate}}，這么綁定的話(huà)，如果頁(yè)面加載快還行，若是加載慢的話(huà)，那就把模板給顯示出來(lái)了，太丑了，你再想想有沒(méi)有辦法規(guī)避這種行為。哈哈，其實(shí)我早就想到了，這么綁定會(huì)出現(xiàn)他擔(dān)心的那個(gè)問(wèn)題，我就是賣(mài)個(gè)關(guān)子而已，裝裝逼也是可以的嘛。用【ng-bind】解決不就ok了嗎。心里早就有數(shù)，來(lái)繼續(xù)走你。

分析中：[ng-bind]只能綁定在元素的屬性中，例如這樣<span ng-bind="text"></span>，咦，貌似不對(duì)，要是顯示html內(nèi)容，那該怎么辦，強(qiáng)大的IDE【vs】的智能提示，顯示有[ng-bind-html]，令人比較滿(mǎn)意的分析。馬上試試看。

更改為如下：

 <h1 ng-bind-html="{{"Hello" | translate}}"></h1>
 <h1 ng-bind-html="{{"xpy0928" | translate}}"></h1>

結(jié)果出錯(cuò)，看錯(cuò)誤很明顯是語(yǔ)法用錯(cuò)了，試試下面的

<h1 ng-bind-html="'Hello' | translate"></h1>
<h1 ng-bind-html="'xpy0928' | translate"></h1>

這下也不行，不過(guò)不是語(yǔ)法的問(wèn)題，如下圖所示：

也可能出現(xiàn)如下錯(cuò)誤：

[$sce:unsafe] Attempting to use an unsafe value in a safe context

結(jié)果一查資料卻是要添加一個(gè)【angular-sanitize.min.js】腳本文件，并且依賴(lài)于它。繼續(xù)添加此腳本文件看看。結(jié)果如我預(yù)期。

【注意】添加此腳本文件之后，要在模塊中對(duì)此腳本文件進(jìn)行依賴(lài)。如下：

var app = angular.module("app", ['pascalprecht.translate', 'ngSanitize']);

我們反過(guò)來(lái)將中文轉(zhuǎn)換為因?yàn)樵囋嚳?，進(jìn)行如下修改

$translateProvider.preferredLanguage('en-us');
<h1 ng-bind-html="'你好' | translate"></h1>
<h1 ng-bind-html="'博客園' | translate"></h1>

結(jié)果顯然是成功的，如下：

總結(jié)

利用angular進(jìn)行國(guó)際化轉(zhuǎn)換時(shí)利用【ng-bind-html】來(lái)進(jìn)行語(yǔ)言的翻譯是接近幾乎比較完美的方案，不會(huì)像利用【{{}}】模式，當(dāng)頁(yè)面加載緩慢時(shí)導(dǎo)致頁(yè)面太丑。但是利用【ng-bind-html】還是有點(diǎn)問(wèn)題，，當(dāng)刷新總有一個(gè)切換的過(guò)程，比如從中文【你好】切換到英文【hello】，這樣過(guò)程你是可以看見(jiàn)的，暫時(shí)未想到更好的解決方案，期待你更好的解決方案。整個(gè)轉(zhuǎn)換個(gè)過(guò)程必須要引用以下四個(gè)腳本文件。

 <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

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: