AngularJs应用页面切换优化方案

最新推荐文章于 2021-06-05 05:18:02 发布

shaofei63

最新推荐文章于 2021-06-05 05:18:02 发布

阅读量686

点赞数

分类专栏： AngularJs 文章标签： AngularJs

本文链接：https://blog.csdn.net/shaofei63/article/details/42743261

版权

本文探讨了在AngularJS应用中如何优化页面切换，通过使用resolve提前请求数据，确保页面加载时数据已准备就绪，避免空白状态影响用户体验。同时，介绍了如何为页面加入过渡动画，提供更平滑的页面切换效果。

摘要由CSDN通过智能技术生成

前言

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