AngularJs應用頁面切換優化方案（轉）

目錄[-]

• 前言
• 場景
• 使用resolve來提早請求數據
• 爲頁面加入切換動畫
• 總結

葡萄城的一款尚在研發中的產品，對外名稱暫定爲X項目。其中使用了已經上市的wijmo中SpreadJS產品，另外，在研發過程當中整理了一些研發總結分享給你們。如本篇的在頁面切換的過程當中優化方案，歡迎你們跟帖交流。

前言

AngularJs被用來開發單頁面應用程序（SPA），利用AJAX調用配合頁面的局部刷新，能夠減小頁面跳轉，從而得到更好的用戶體驗。Angular的ngView及其對應的強大路由機制，是實現SPA應用的核心模塊。本文所說的頁面切換指的就是這個路由機制，即根據不一樣的url展現不一樣的視圖。

有一種很是常見的場景：在切換至新頁面後，須要經過AJAX調用從服務器請求一些數據，而後根據這些數據來展現頁面。若是未作任何處理，那麼頁面會先加載新頁面的html模版，但此時模板中的數據model還並無被請求，所以會有一段時間顯示空數據，很是影響用戶體驗。

場景

讓咱們以Angular官方給出的 PhoneCat Tutorial App來講明這個問題。

在PhoneCat項目的github主頁上有這麼一段話：「There is no dynamic backend (no application server) for this application. Instead we fake the application server by fetching static json files.」也就是說，這個示例項目中只是模擬了一個server，因此當頁面請求phones.json和每一個手機的詳細數據時，這些請求會在很是短的時間內就完成了，咱們並感受不到展現頁面存在什麼問題。

而在真實的網絡環境中，請求這些json文件可能會消耗相對較長的時間。讓咱們來模擬一下網絡請求響應時間較長的狀況。在這裏我用了express來代替原來的http-server，並在客戶端請求數據時延遲5秒再作出響應：

運行起來後能夠看到，頁面當即會顯示出來，可是本來應該顯示手機列表的區域是一片空白，直到5秒以後纔將列表數據顯示出來。點擊一個手機名稱進入詳細信息頁面，一樣是一開始只顯示了html模板的內容，而後纔將參數數據填充到頁面上。過程當中頁面會出現抖動，很是影響用戶體驗。

使用resolve來提早請求數據

在遇到這個問題時，我最早想到的就是添加一個loading提示：在網絡請求前顯示loading遮罩圖片，網絡請求結束後再將其隱藏。因而點擊進入手機的detail頁面後頁面會呈現一個loading圖片，像下圖這樣：

能夠看到，頁面應該顯示手機詳細數據的區域顯示空白，形成很是很差的用戶體驗。這是由於PhoneDetailCtrl的代碼是在頁面跳轉發生後才執行的，而此時手機信息數據尚未從服務器獲取到，也就是說$scope.phone這個model還未被賦值。有沒有一種辦法讓這些數據在切換到這個頁面以前就先準備好呢？

答案固然是有，也就是這篇文章要介紹的主角——resolve。咱們知道ng-view是經過$routeProvider來訂製頁面路由規則，這個路由規則在phonecat項目源碼中是這樣定義的：

爲了讓頁面跳轉以前執行一些事情，咱們能夠在路由規則中配置resolve參數。

Resolve參數能夠注入一組service到路由綁定的controller之中。若是其中的一個或多個service是異步對象（$q.defer）時，那麼只有當這些異步操做都完成後，頁面纔會跳轉。利用這一點，咱們就能夠在頁面跳轉前先將手機詳細信息數據請求到本地。跳轉後，目標頁面就會當即正常顯示數據。

我將手機詳細信息頁面的路由配置代碼修改以下：

在上面的代碼中，我只能使用$route.current.params來獲取phoneId參數，由於此時頁面還未跳轉，$routeParams是獲取不到任何值的。通過這樣配置resolve參數後，我就能夠在PhoneDetailCtrl中注入一個名爲phoneDetailsService的對象。PhoneDetailCtrl的代碼以下：

這樣，就能夠在頁面跳轉以前獲取到請求的數據了。

爲頁面加入切換動畫

爲了讓頁面間的切換更平滑，能夠在頁面切換加入過渡動畫。AngularJs對一些經常使用的指令好比ngRepeat、ngSwitch以及ngView都有動畫的支持。

AngularJs經過CSS來定義動畫，要實現DOM元素的動畫效果很是簡單。當DOM元素變化的時候，AngularJs會在元素上添加特定的class：

· ng-enter，當元素被添加時會被應用；

· ng-move，當元素被移動時會被應用；

· ng-leave，當元素被刪除時會被應用。

咱們能夠對ng-view應用AngularJs動畫，在phone-cat項目中，animation.css中的下列代碼實現了切換頁面的淡入淡出動畫：

.view-frame.ng--frame.ng-000-frame.ng--webkit-animation: 0.5s fade--moz-animation: 0.5s fade--o-animation: 0.5s fade-0.5s fade--index: 100-frame.ng--webkit-animation: 0.5s fade--moz-animation: 0.5s fade--o-animation: 0.5s fade-0.5s fade--index: 99

總結

在Web應用中，爲了得到良好的用戶體驗，就要在界面上使用一些技巧讓用戶不會感受到突兀。本文提出了兩點技巧讓AngularJs應用在頁面切換時更加天然平滑。