如何使用AngularJS，优化前端应用的页面切换？
本帖最后由 断天涯大虾 于 2016-9-27 09:23 编辑前言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秒再做出响应：http://images.cnitblog.com/blog/139239/201501/151029304487626.png
运行起来后可以看到，页面立即会显示出来，但是原本应该显示手机列表的区域是一片空白，直到5秒之后才将列表数据显示出来。点击一个手机名称进入详细信息页面，同样是一开始只显示了html模板的内容，然后才将参数数据填充到页面上。过程中页面会出现抖动，非常影响用户体验。
使用resolve来提前请求数据在遇到这个问题时，我最先想到的就是添加一个loading提示：在网络请求前显示loading遮罩图片，网络请求结束后再将其隐藏。于是点击进入手机的detail页面后页面会呈现一个loading图片，像下图这样：http://images.cnitblog.com/blog/139239/201501/151029314175555.jpg
可以看到，页面应该显示手机详细数据的区域显示空白，造成非常不好的用户体验。这是因为PhoneDetailCtrl的代码是在页面跳转发生后才执行的，而此时手机信息数据还没有从服务器获取到，也就是说$scope.phone这个model还未被赋值。有没有一种办法让这些数据在切换到这个页面之前就先准备好呢？
答案当然是有，也就是这篇文章要介绍的主角——resolve。我们知道ng-view是通过$routeProvider来订制页面路由规则，这个路由规则在phonecat项目源码中是这样定义的：http://images.cnitblog.com/blog/139239/201501/151029324014957.png
为了让页面跳转之前执行一些事情，我们可以在路由规则中配置resolve参数。
Resolve参数可以注入一组service到路由绑定的controller之中。如果其中的一个或多个service是异步对象（$q.defer）时，那么只有当这些异步操作都完成后，页面才会跳转。利用这一点，我们就可以在页面跳转前先将手机详细信息数据请求到本地。跳转后，目标页面就会立即正常显示数据。
我将手机详细信息页面的路由配置代码修改如下：http://images.cnitblog.com/blog/139239/201501/151029333868656.png在上面的代码中，我只能使用$route.current.params来获取phoneId参数，因为此时页面还未跳转，$routeParams是获取不到任何值的。经过这样配置resolve参数后，我就可以在PhoneDetailCtrl中注入一个名为phoneDetailsService的对象。
PhoneDetailCtrl的代码如下：http://images.cnitblog.com/blog/139239/201501/151029347923887.png这样，就可以在页面跳转之前获取到请求的数据了。
为页面加入切换动画为了让页面间的切换更平滑，可以在页面切换加入过渡动画。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提供移动端用户界面选择。
开发工具推荐
[*]ComponentOne Studio Enterprise 是一款专注于企业应用的.NET全功能控件套包，支持WinForms、WPF、UWP、ASP.NET MVC等多个平台，帮助您在缩减成本的同时，提前交付丰富的桌面、Web和移动企业应用。
[*]Spread Studio 表格控件是一个功能和Excel类似的表格控件。用于在您的应用系统中实现表格数据录入和编辑等交互功能，并且提供灵活的定制能力和丰富的数据可视化效果。
[*]ActiveReports 是一款全方位的报表解决方案，它提供极易使用的报表设计器和三种报表模型，无需编码便可快速设计任意类型报表。
[*]Wijmo Enterprise 是为企业应用程序开发而推出的一系列包含HTML5和JavaScript的开发控件集。无论您应用程序是移动端、PC端、还是必须要支持IE6，Wijmo Enterprise均能满足您的需求。
页:
[1]