資源描述：
《angularjs應(yīng)用頁面切換優(yōu)化方案》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、Angularjs應(yīng)用頁面切換優(yōu)化方案迮研發(fā)過程中整理r-苧研發(fā)總結(jié)分#給人家。如本篇的迮貝而切換的過程中優(yōu)化力‘案，歡迎人家跟帖交流。冃if目AngularJs被川來K?發(fā)中?頁面似川程序(SPA)，利川AJAX調(diào)川配合頁面的W部刷新，刊‘以減少頁面跳轉(zhuǎn)，從而獲得更好的川戶體驗(yàn)。Angular的ngView及其對應(yīng)的強(qiáng)大路由機(jī)制，足實(shí)現(xiàn)SPA應(yīng)川的核心模塊。本文所說的頁而切換指的就足這個路由機(jī)制，即根據(jù)不同的url展示不同的視閣。行一種非常常見的場呆：在切換至新貞而后，需要通過AJAX調(diào)川從服務(wù)器請求一些數(shù)據(jù)，然盾根據(jù)這些數(shù)據(jù)來肢示頁而。如果未做任何處那.，那么貞而會先加載新貞刖的htm
2、l模版，似此時模板屮的數(shù)據(jù)model還并沒有被請求，閃此會有一段時間顯示空數(shù)據(jù)，非常影響川戶體驗(yàn)。場景讓我們以Angular官方給出的PhoneCatTutorialApp來說明這個問題。在PhoneCat項(xiàng)目的github主頁上有這么一段話:“Thereisnodynamicbackend(noapplicationserver)forthisapplication.Insteadwefaketheapplicationserverbyfetchingstaticjsonfiles.”也就是說，這個示例項(xiàng)目中只是模擬了一個server,所以當(dāng)頁面請求phones.json和每個手機(jī)的詳細(xì)
3、數(shù)裾時，這些諸求會在非常短的時間內(nèi)就完成了，我們并感覺不到展示頁面存在什么問題。而在真實(shí)的網(wǎng)絡(luò)環(huán)境中，諸求這碑json文件可能會消耗相對較長的時閼。讓我們來模擬?卜網(wǎng)絡(luò)請求響應(yīng)時悶較長的悄況。在這坦我用丫express來代矜原來的http-server,丼在容廣端請求數(shù)據(jù)吋延遲5秒W做出響應(yīng)：app.get(/phones/:name'yfunction(reqJres)pvarphoneName=req.params.name;isetTimeout(function(){ires.sendFile(_dirname+'/app/phones/1+phoneName+'.json1);i
4、5000);4運(yùn)行起來后可以耵到，災(zāi)而立即會攰示出來，似是原本應(yīng)該攰示丁?機(jī)列表的ix:域是一片空n，s到5秒之后冰將列農(nóng)數(shù)據(jù)妞示出來。點(diǎn)出一個手機(jī)名稱進(jìn)入詳細(xì)信息頁而，同樣是一開始只攰示了html模板的內(nèi)容，然后冰將參數(shù)數(shù)據(jù)填充到頁而上。過程屮頁面會出現(xiàn)抖動，非常影響用戶體驗(yàn)。使用resolve來提前請求數(shù)據(jù)祚遇到這個問題時，我Ai先想到的就是添加一個loading提示：介:M絡(luò)請求前妞示loading遮眾IWV，網(wǎng)絡(luò)諮求結(jié)朿后W將隱藏。丁?是點(diǎn)擊進(jìn)入r?機(jī)的detail貝而伽‘會？.現(xiàn)-?個loading圖R,像卜'圖這樣：AviilaWHtyandNetworksA^ailabiti
5、TySiz*andWeightDwwnsiontBaneryStotAg?andMemoryConnectivityAndroidTypeRAMNetworkiupportOBVm>onT屬M(fèi)rTmtirtcemXUor>()tVlAFimStandbyt>mt(max)Biu?tootn瞇fWWJ黨OFSJ(Di?p4ayHardwareAddltioruilFeaturesSowontutCFURnnwyScreenrvsolutxxiuseFtoturtsTouchtxr>?RAue?^/jackFMRJOIO可以看到，頁而應(yīng)該顯示手機(jī)詳細(xì)數(shù)據(jù)的區(qū)域顯示空白，造成非常不好的用戶體驗(yàn)。
6、這足因?yàn)镻honeDetailCtrl的代碼是在災(zāi)而跳轉(zhuǎn)發(fā)1R/T執(zhí)行的，而此時T?機(jī)信息數(shù)裾還沒冇從服務(wù)器荻取到，也就是說$scope.phone這個model還未被賦似。冇沒冇一種辦法U:這些數(shù)據(jù)在切換到這個貝而之前就先準(zhǔn)備好呢？答案1然是打，也就是這篇文章要介紹的主角resolvec我們知道ng-view是通過$routeProvider米訂制頁面路山規(guī)則，這個路山規(guī)則在phonecat項(xiàng)H源碼屮是這樣定義的：$routeProvider.Iwhen(丨/phones1,ptemplateUrl:1partials/phone-list.html1xcontroller:'Phone
7、ListCtrl'iwhen('/phones/:phoneld1，ptemplateUrl:1partials/phone-detail?html.controller:'PhoneDetailCtrl'i})?*otherwise({iredirectTo:'/phones'i})>為了讓頁而跳轉(zhuǎn)之前執(zhí)行一些事情，我們可以在路由規(guī)則巾配罟resolve參數(shù)。Resolve參數(shù)町以沌入組service到路由綁定的con
