AngularJs应用页面澳门新葡亰赌995577

AngularJs应用页面切换优化方案

 

葡萄城的一款尚在研发中的产品,对外名称暂定为X项目。其中使用了已经上市的wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家。如本篇的在页面切换的过程中优化方案,欢迎大家跟帖交流。

葡萄城的一款尚在研发中的产品,对外名称暂定为X项目。其中使用了已经上市的wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家。如本篇的在页面切换的过程中优化方案,欢迎大家跟帖交流。

前言

AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验。Angular的ngView及其对应的强大路由机制,是实现SPA应用的核心模块。本文所说的页面切换指的就是这个路由机制,即根据不同的url展示不同的视图。

有一种非常常见的场景:在切换至新页面后,需要通过AJAX调用从服务器请求一些数据,然后根据这些数据来展示页面。如果未做任何处理,那么页面会先加载新页面的html模版,但此时模板中的数据model还并没有被请求,因此会有一段时间显示空数据,非常影响用户体验。

前言

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秒再做出响应:

澳门新葡亰赌995577 1

运行起来后可以看到,页面立即会显示出来,但是原本应该显示手机列表的区域是一片空白,直到5秒之后才将列表数据显示出来。点击一个手机名称进入详细信息页面,同样是一开始只显示了html模板的内容,然后才将参数数据填充到页面上。过程中页面会出现抖动,非常影响用户体验。

场景

让我们以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秒再做出响应:

澳门新葡亰赌995577 1

运行起来后可以看到,页面立即会显示出来,但是原本应该显示手机列表的区域是一片空白,直到5秒之后才将列表数据显示出来。点击一个手机名称进入详细信息页面,同样是一开始只显示了html模板的内容,然后才将参数数据填充到页面上。过程中页面会出现抖动,非常影响用户体验。