資源描述：
《AngularJs應用頁面切換優(yōu)化方案.docx》由會員上傳分享，免費在線閱讀，更多相關內容在應用文檔-天天文庫。
1、AngularJs應用頁面切換優(yōu)化方案在研發(fā)過程中整理了一些研發(fā)總結分享給大家。如本篇的在頁面切換的過程中優(yōu)化方案，歡迎大家跟帖交流。前言AngularJs被用來開發(fā)單頁面應用程序（SPA），利用AJAX調用配合頁面的局部刷新，可以減少頁面跳轉，從而獲得更好的用戶體驗。Angular的ngView及其對應的強大路由機制，是實現SPA應用的核心模塊。本文所說的頁面切換指的就是這個路由機制，即根據不同的url展示不同的視圖。有一種非常常見的場景：在切換至新頁面后，需要通過AJAX調用從服務器請求一些數據，然后根據這些數據
2、來展示頁面。如果未做任何處理，那么頁面會先加載新頁面的html模版，但此時模板中的數據model還并沒有被請求，因此會有一段時間顯示空數據，非常影響用戶體驗。場景讓我們以Angular官方給出的?PhoneCatTutorialApp來說明這個問題。在PhoneCat項目的github主頁上有這么一段話：“Thereisnodynamicbackend(noapplicationserver)forthisapplication.Insteadwefaketheapplicationserverbyfetchings
3、taticjsonfiles.”也就是說，這個示例項目中只是模擬了一個server，所以當頁面請求phones.json和每個手機的詳細數據時，這些請求會在非常短的時間內就完成了，我們并感覺不到展示頁面存在什么問題。而在真實的網絡環(huán)境中，請求這些json文件可能會消耗相對較長的時間。讓我們來模擬一下網絡請求響應時間較長的情況。在這里我用了express來代替原來的http-server，并在客戶端請求數據時延遲5秒再做出響應：運行起來后可以看到，頁面立即會顯示出來，但是原本應該顯示手機列表的區(qū)域是一片空白，直到5秒之
4、后才將列表數據顯示出來。點擊一個手機名稱進入詳細信息頁面，同樣是一開始只顯示了html模板的內容，然后才將參數數據填充到頁面上。過程中頁面會出現抖動，非常影響用戶體驗。使用resolve來提前請求數據在遇到這個問題時，我最先想到的就是添加一個loading提示：在網絡請求前顯示loading遮罩圖片，網絡請求結束后再將其隱藏。于是點擊進入手機的detail頁面后頁面會呈現一個loading圖片，像下圖這樣：可以看到，頁面應該顯示手機詳細數據的區(qū)域顯示空白，造成非常不好的用戶體驗。這是因為PhoneDetailCtrl
5、的代碼是在頁面跳轉發(fā)生后才執(zhí)行的，而此時手機信息數據還沒有從服務器獲取到，也就是說$scope.phone這個model還未被賦值。有沒有一種辦法讓這些數據在切換到這個頁面之前就先準備好呢？答案當然是有，也就是這篇文章要介紹的主角——resolve。我們知道ng-view是通過$routeProvider來訂制頁面路由規(guī)則，這個路由規(guī)則在phonecat項目源碼中是這樣定義的：為了讓頁面跳轉之前執(zhí)行一些事情，我們可以在路由規(guī)則中配置resolve參數。Resolve參數可以注入一組service到路由綁定的contr
6、oller之中。如果其中的一個或多個service是異步對象（$q.defer）時，那么只有當這些異步操作都完成后，頁面才會跳轉。利用這一點，我們就可以在頁面跳轉前先將手機詳細信息數據請求到本地。跳轉后，目標頁面就會立即正常顯示數據。我將手機詳細信息頁面的路由配置代碼修改如下：在上面的代碼中，我只能使用$route.current.params來獲取phoneId參數，因為此時頁面還未跳轉，$routeParams是獲取不到任何值的。經過這樣配置resolve參數后，我就可以在PhoneDetailCtrl中注入一個
7、名為phoneDetailsService的對象。PhoneDetailCtrl的代碼如下：這樣，就可以在頁面跳轉之前獲取到請求的數據了。為頁面加入切換動畫為了讓頁面間的切換更平滑，可以在頁面切換加入過渡動畫。AngularJs對一些常用的指令比如ngRepeat、ngSwitch以及ngView都有動畫的支持。AngularJs通過CSS來定義動畫，要實現DOM元素的動畫效果非常簡單。當DOM元素變化的時候，AngularJs會在元素上添加特定的class：·ng-enter，當元素被添加時會被應用；·ng-mov
8、e，當元素被移動時會被應用；·ng-leave，當元素被刪除時會被應用。我們可以對ng-view應用AngularJs動畫，在phone-cat項目中，animation.css中的下列代碼實現了切換頁面的淡入淡出動畫：.view-frame.ng-enter,.view-frame.ng-leave{background:white;posi
