腳本之家服務器常用軟件

快捷導航

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

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

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

前言

利用H5項目第一版本已經(jīng)上線，話說有了第一期就有了第二期，這不要為第二期做準備了，老大發(fā)話第一件事就要利用Angular JS實現(xiàn)項目的國際化以及后續(xù)要借助這個框架來實現(xiàn)其他功能，好吧我表示沒怎么接觸過，這一個禮拜自己也對Angular基本的用法已經(jīng)有了初步的了解以及熟悉，于是乎就有了這篇文章的產(chǎn)生。其實沒我什么事，我也是主動請纓說交給我，因為年底了嘛，也沒什么事，不急不忙的，一天也樂得清閑，還不給自己找點事做，而且還能在做的過程中能學到東西，何樂而不為呢！Angular已盛行一時，但請恕我見識少，一直認為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必須以字符串形式給出，要不然得不到你所預期。這么寫就對了{{"hello" | translate}}

輸出如下：

【第二次改進】

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

我們的場景是這樣的：我們有存儲各種語言的JSON文件，當頁面加載時，獲取用戶的所使用的語言，加載該JSON文件，里面存儲的是鍵值對，分別是對應的中文-》英文以及英文-》中文，若獲取用戶所使用的語言為英文你就將中文翻譯成英文。反之亦然，好吧，原來是將翻譯的鍵值對放在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】為我們需要請求的文件的擴展名即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）繼續(xù)命令行：appcmd set config /section:staticContent /+[fileExtension='.json',mimeType='application/json']

當然如果是發(fā)布在本地IIS中只需在Mime中添加映射以及應用配置程序中進行配置即可。

最終翻譯成功如下：

【第三次升級終極版本】

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

挑刺話題中：如上所示，{{"Hello" | translate}}，這么綁定的話，如果頁面加載快還行，若是加載慢的話，那就把模板給顯示出來了，太丑了，你再想想有沒有辦法規(guī)避這種行為。哈哈，其實我早就想到了，這么綁定會出現(xià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é)果如我預期。

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

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

我們反過來將中文轉(zhuǎn)換為因為試試看，進行如下修改

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

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

總結(jié)

利用angular進行國際化轉(zhuǎn)換時利用【ng-bind-html】來進行語言的翻譯是接近幾乎比較完美的方案，不會像利用【{{}}】模式，當頁面加載緩慢時導致頁面太丑。但是利用【ng-bind-html】還是有點問題，，當刷新總有一個切換的過程，比如從中文【你好】切換到英文【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

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

您可能感興趣的文章: