文档章节

AngularJs应用页面切换优化方案

葡萄城技术团队
 葡萄城技术团队
发布于 2015/01/15 10:35
字数 1623
阅读 3912
收藏 135

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

前言

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

image

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

使用resolve来提前请求数据

在遇到这个问题时,我最先想到的就是添加一个loading提示:在网络请求前显示loading遮罩图片,网络请求结束后再将其隐藏。于是点击进入手机的detail页面后页面会呈现一个loading图片,像下图这样:

clip_image002

可以看到,页面应该显示手机详细数据的区域显示空白,造成非常不好的用户体验。这是因为PhoneDetailCtrl的代码是在页面跳转发生后才执行的,而此时手机信息数据还没有从服务器获取到,也就是说$scope.phone这个model还未被赋值。有没有一种办法让这些数据在切换到这个页面之前就先准备好呢?

答案当然是有,也就是这篇文章要介绍的主角——resolve。我们知道ng-view是通过$routeProvider来订制页面路由规则,这个路由规则在phonecat项目源码中是这样定义的:

image

为了让页面跳转之前执行一些事情,我们可以在路由规则中配置resolve参数。

Resolve参数可以注入一组service到路由绑定的controller之中。如果其中的一个或多个service是异步对象($q.defer)时,那么只有当这些异步操作都完成后,页面才会跳转。利用这一点,我们就可以在页面跳转前先将手机详细信息数据请求到本地。跳转后,目标页面就会立即正常显示数据。

我将手机详细信息页面的路由配置代码修改如下:

image

在上面的代码中,我只能使用$route.current.params来获取phoneId参数,因为此时页面还未跳转,$routeParams是获取不到任何值的。经过这样配置resolve参数后,我就可以在PhoneDetailCtrl中注入一个名为phoneDetailsService的对象。PhoneDetailCtrl的代码如下:

image

这样,就可以在页面跳转之前获取到请求的数据了。

为页面加入切换动画

为了让页面间的切换更平滑,可以在页面切换加入过渡动画。AngularJs对一些常用的指令比如ngRepeat、ngSwitch以及ngView都有动画的支持。

AngularJs通过CSS来定义动画,要实现DOM元素的动画效果非常简单。当DOM元素变化的时候,AngularJs会在元素上添加特定的class:

· ng-enter,当元素被添加时会被应用;

· ng-move,当元素被移动时会被应用;

· ng-leave,当元素被删除时会被应用。

我们可以对ng-view应用AngularJs动画,在phone-cat项目中,animation.css中的下列代码实现了切换页面的淡入淡出动画:

.view-frame.ng--frame.ng-000-frame.ng--webkit-animation: 0.5s fade--moz-animation: 0.5s fade--o-animation: 0.5s fade-0.5s fade--index: 100-frame.ng--webkit-animation: 0.5s fade--moz-animation: 0.5s fade--o-animation: 0.5s fade-0.5s fade--index: 99

总结

在Web应用中,为了获得良好的用户体验,就要在界面上使用一些技巧让用户不会感觉到突兀。本文提出了两点技巧让AngularJs应用在页面切换时更加自然平滑。

另外,在实际开发过程中,还可以适当选用开发工具减轻部分代码量,对项目进度有较大的帮助。目前,支持AngularJS的开发工具不多,Wijmo 是较有优势的一个,点击此处能看到对Angular 2 的具体支持情况。微软Dynamics 使用 Wijmo 5提供移动端用户界面选择。

完整demo下载地址:AngularJs应用页面切换优化方案

 

© 著作权归作者所有

葡萄城技术团队

葡萄城技术团队

粉丝 404
博文 583
码字总数 900180
作品 20
西安
高级程序员
私信 提问
加载中

评论(8)

1024
1024

引用来自“GoodLoser”的评论

用resolve会不会在用户点击后,等待一段时间页面才会有反应?
用户点击后进行网络请求,请求到数据后才会跳转。 但是ajax请求是异步过程,所以页面不会被阻塞,可以在用户点击后加入全局或局部的loading动画,可以参考文章附带的示例代码。
上海什么大学
上海什么大学
看到这么多波浪线整个人都不好了36
品不懂
品不懂
马克
麦壳原野
麦壳原野
用resolve会不会在用户点击后,等待一段时间页面才会有反应?
克己克己
克己克己
好文
卖小女孩的小火柴
卖小女孩的小火柴
前一天使用anjular js mobile 做了一个记账引用,感觉素的各方面都还不错。这篇文章很好,学习了。
democracy
democracy
mark
开源中国投资人
开源中国投资人
好帖
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
189
0
第220天:Angular---路由

内容介绍,为什么要使用前端路由? 在2005左右,兴起了一种叫做ajax的技术,有了ajax之后,我们向服务端提交数据的时候就不再需要使用from表单去提交了,因为from表单之间的提交会导致页面之...

半指温柔乐
2018/05/05
0
0
20 个有用的 Angular.js 工具

喜欢 Angular.js?我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。 对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一...

Leenajose
2015/08/04
7.1K
22
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
3.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

Error和Exception

1.Error类和Exception类都是继承Throwable类 2.Error(错误)是系统中的错误,程序员是不能改变的和处理的,是在程序编译时出现的错误,只能通过修改程序才能修正。一般是指与虚拟机相关的问...

大瑞清_liurq
28分钟前
4
0
8086汇编基础 start 程序入口标签的示例

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
33分钟前
4
0
uni app 零基础小白到项目实战2

<template> <scroll-view v-for="(card, index) in list" :key="index"> <view v-for =(item, itemIndex) in card"> {{item.value}}</view> </scroll-view></template> GraceUi va......

达达前端小酒馆
34分钟前
4
0
http keep-alive 解释

本文转载于:专业的前端网站➜http keep-alive 解释 1、概念 keep-alive示例: keep-alive模式(又称持久连接、连接重用)时,keep-alive功能使客户端到服务器端的连接持续有效,当出现对服务...

前端老手
39分钟前
4
0
groovy爬虫实例——历史上的今天

最近做了一个历史上今天的爬虫程序,跟历史天气数据源一致,数据量比较小,几十秒就爬完了。中间遇到一些问题,一起分享出来供大家参考。本项目源码和相关数据已经上传到了github,有兴趣的朋...

八音弦
49分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部