欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年12月08日 10:03:15   作者：JeffckyWang  
利用angular進(jìn)行國際化轉(zhuǎn)換時(shí)利用【ng-bind-html】來進(jìn)行語言的翻譯是接近幾乎比較完美的方案，不會(huì)像利用【{{}}】模式，當(dāng)頁面加載緩慢時(shí)導(dǎo)致頁面太丑。本文對其實(shí)現(xiàn)方法進(jìn)行介紹，有需要的朋友可以看下

前言

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

話題

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

第一步

兩個(gè)腳本文件必不可少，我喜歡用壓縮的，看個(gè)人愛好，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é)果什么都沒有，還沒出錯(cuò)，是不是很神奇。

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

輸出如下：

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

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

我們的場景是這樣的：我們有存儲(chǔ)各種語言的JSON文件，當(dāng)頁面加載時(shí)，獲取用戶的所使用的語言，加載該JSON文件，里面存儲(chǔ)的是鍵值對，分別是對應(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】為存儲(chǔ)語言的JSON文件夾目錄，【suffix】為我們需要請求的文件的擴(kuò)展名即JSON。而【$translateProvider.preferredLanguage('en-us')】則是請求il8n文件夾下名為【en-us】的JSON文件。

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

再一看，擦，竟然沒找到zh-cn的JSON文件，如下圖！這個(gè)問題有點(diǎn)叼，開始我還以為是文件夾名【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)該滿意了吧，趕緊欣喜的將老大叫過來大功告成啊，尼瑪，終于完事了，好，要的就是這效果，非常不錯(cuò)，不過。。。心想難道這么做你還不滿意還是不行，結(jié)果又被挑到刺了。

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

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

更改為如下：

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

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

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

這下也不行，不過不是語法的問題，如下圖所示：

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

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

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

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

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

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

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

相關(guān)文章

最新評論