angularjs应用页面切换优化方案

《angularjs应用页面切换优化方案》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Angularjs应用页面切换优化方案迮研发过程中整理r-苎研发总结分#给人家。如本篇的迮贝而切换的过程中优化力‘案，欢迎人家跟帖交流。冃if目AngularJs被川来K•发中•页面似川程序(SPA)，利川AJAX调川配合页面的W部刷新，刊‘以减少页面跳转，从而获得更好的川户体验。Angular的ngView及其对应的强大路由机制，足实现SPA应川的核心模块。本文所说的页而切换指的就足这个路由机制，即根据不同的url展示不同的视阁。行一种非常常见的场呆：在切换至新贞而后，需要通过AJAX调川从服务器请求一些数据，然盾根据这些数据來肢示页而。如果未做任何处那.，那么贞而会先加载新贞刖的htm

2、l模版，似此时模板屮的数据model还并没有被请求，闪此会有一段时间显示空数据，非常影响川户体验。场景让我们以Angular官方给出的PhoneCatTutorialApp来说明这个问题。在PhoneCat项目的github主页上有这么一段话:“Thereisnodynamicbackend(noapplicationserver)forthisapplication.Insteadwefaketheapplicationserverbyfetchingstaticjsonfiles.”也就是说，这个示例项目中只是模拟了一个server,所以当页面请求phones.json和每个手机的详细

3、数裾时，这些诸求会在非常短的时间内就完成了，我们并感觉不到展示页面存在什么问题。而在真实的网络环境中，诸求这碑json文件可能会消耗相对较长的时阏。让我们来模拟•卜网络请求响应时闷较长的悄况。在这坦我用丫express来代矜原来的http-server,丼在容广端请求数据吋延迟5秒W做出响应：app.get(/phones/:name'yfunction(reqJres)pvarphoneName=req.params.name;isetTimeout(function(){ires.sendFile(_dirname+'/app/phones/1+phoneName+'.json1);i

4、5000);4运行起來后可以耵到，災而立即会攰示出來，似是原本应该攰示丁•机列表的ix:域是一片空n，s到5秒之后冰将列农数据妞示出來。点出一个手机名称进入详细信息页而，同样是一开始只攰示了html模板的内容，然后冰将参数数据填充到页而上。过程屮页面会出现抖动，非常影响用户体验。使用resolve来提前请求数据祚遇到这个问题时，我Ai先想到的就是添加一个loading提示：介:M络请求前妞示loading遮眾IWV，网络谘求结朿后W将隐藏。丁•是点击进入r•机的detail贝而伽‘会？.现-•个loading图R,像卜'图这样：AviilaWHtyandNetworksA^ailabiti

5、TySiz*andWeightDwwnsiontBaneryStotAg«andMemoryConnectivityAndroidTypeRAMNetworkiupportOBVm>onT屬MrTmtirtcemXUor>()tVlAFimStandbyt>mt(max)Biu«tootn眯fWWJ黨OFSJ(Di«p4ayHardwareAddltioruilFeaturesSowontutCFURnnwyScreenrvsolutxxiuseFtoturtsTouchtxr>«RAue»^/jackFMRJOIO可以看到，页而应该显示手机详细数据的区域显示空白，造成非常不好的用户体验。

6、这足因为PhoneDetailCtrl的代码是在災而跳转发1R/T执行的，而此时T•机信息数裾还没冇从服务器荻取到，也就是说$scope.phone这个model还未被赋似。冇没冇一种办法U:这些数据在切换到这个贝而之前就先准备好呢？答案1然是打，也就是这篇文章要介绍的主角resolvec我们知道ng-view是通过$routeProvider米订制页面路山规则，这个路山规则在phonecat项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})>为了让页而跳转之前执行一些事情，我们可以在路由规则巾配罟resolve参数。Resolve参数町以沌入组service到路由绑定的con