AngularJS被用來開發單頁面應用程式（SPA），利用AJAX調用配合頁面的局部重新整理，可以減少頁面跳轉，進而獲得更好的使用者體驗。Angular的ngView及其對應的強大路由機制，是實作SPA應用的核心子產品。本文所說的頁面切換指的就是這個路由機制，即根據不同的URL展示不同的視圖。
有一種非常常見的場景：在切換至新頁面後，需要通過AJAX調用從伺服器請求一些資料，然後根據這些資料來展示頁面。如果未做任何處理，那麼頁面會先加載新頁面的html模版，但此時模闆中的資料model還并沒有被請求，是以會有一段時間顯示空資料，非常影響使用者體驗。
在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模闆的内容，然後才将參數資料填充到頁面上。過程中頁面會出現抖動，非常影響使用者體驗。
在遇到這個問題時，我最先想到的就是添加一個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中的下列代碼實作了切換頁面的淡入淡出動畫：
在Web應用中，為了獲得良好的使用者體驗，就要在界面上使用一些技巧讓使用者不會感覺到突兀。本文提出了兩點技巧讓AngularJS應用在頁面切換時更加自然平滑。
相關閱讀：
<a href="http://www.cnblogs.com/powertoolsteam/p/Angular_Wijmo.html" target="_blank">開放才能進步！Angular和Wijmo一起走過的日子</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/angular_react.html" target="_blank">Angular vs React 最全面深入對比</a>
<a href="http://wijmo.gcpowertools.com.cn/wijmo-build-5-20171-293-available/" target="_blank">Wijmo已率先支援Angular4 & TypeScript 2.2</a>