AngularJS应用页面切换优化方案

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

葡萄城的一款尚在研发中的产品,对外名称暂定为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项目源码中是这样定义的:

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

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

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

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

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

为页面加入切换动画

为了让页面间的切换更平滑,可以在页面切换加入过渡动画。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-enter,
.view-frame.ng-leave {
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.view-frame.ng-enter {
  -webkit-animation: 0.5s fade-in;
  -moz-animation: 0.5s fade-in;
  -o-animation: 0.5s fade-in;
  animation: 0.5s fade-in;
  z-index: 100;
}

.view-frame.ng-leave {
  -webkit-animation: 0.5s fade-out;
  -moz-animation: 0.5s fade-out;
  -o-animation: 0.5s fade-out;
  animation: 0.5s fade-out;
  z-index: 99;
}

总结

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

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

 

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

 

相关阅读:

开放才能进步!Angular和Wijmo一起走过的日子

Angular vs React 最全面深入对比

Wijmo已率先支持Angular4 & TypeScript 2.2

 

相关文章
|
3月前
|
缓存 前端开发 测试技术
Angular 与 Angular Universal 超厉害!实现服务器端渲染,开启高效开发与优质用户体验之旅!
【8月更文挑战第31天】在现代前端开发中,用户体验至关重要。Angular Universal 为 Angular 应用提供服务器端渲染(SSR)解决方案,显著提升性能和可访问性。本文介绍 SSR 的优势,包括更快的首屏加载时间、更好的 SEO 和更稳定的用户体验。接着详细讲解安装和配置 Angular Universal 的步骤,并提供优化 SSR 性能的方法,如延迟加载、缓存和预取技术。同时讨论了处理动态内容的策略,并介绍了测试和部署的最佳实践。通过遵循这些实践,可以确保应用高效稳定运行,提升用户体验。附带的示例代码展示了如何在服务器端和客户端处理数据。
36 0
|
5月前
|
JavaScript 小程序 API
技术经验分享:Angular动态创建组件之Portals
技术经验分享:Angular动态创建组件之Portals
|
监控
angularjs动态监控数据
angularjs动态监控数据
|
缓存 前端开发 JavaScript
基于 Spartacus 的 Angular Storefront 性能优化建议
基于 Spartacus 的 Angular Storefront 性能优化建议
|
前端开发
Angular SSR 应用启动时的一些保护措施
Angular SSR 应用启动时的一些保护措施
|
Web App开发 存储 缓存
Angular SSR 和 PWA 结合起来使用的一些现象观察
Angular SSR 和 PWA 结合起来使用的一些现象观察
|
网络架构
如何处理 Angular 单页面应用里的 a 标签,避免点击后重新加载整个应用
如何处理 Angular 单页面应用里的 a 标签,避免点击后重新加载整个应用
|
数据采集 开发框架 JavaScript
Angular SSR 探究
你知道 Angular Universal 吗?可以帮助网站提供更好的 SEO 支持哦!
183 0
Angular SSR 探究
|
数据采集 缓存 JavaScript
运行在 CCV2 环境上的 Angular 服务器端渲染应用的性能瓶颈分析
运行在 CCV2 环境上的 Angular 服务器端渲染应用的性能瓶颈分析
122 0
运行在 CCV2 环境上的 Angular 服务器端渲染应用的性能瓶颈分析
|
存储 JavaScript API
运行在 SSR 模式下的 Angular 应用的内存泄漏问题分析
运行在 SSR 模式下的 Angular 应用的内存泄漏问题分析
122 0
运行在 SSR 模式下的 Angular 应用的内存泄漏问题分析