使用angularjs管理UI状态和动画的正确方法

Question

我开始将具有大量复杂JQuery DOM操作和ASP.NET MVC后端的大型Web应用程序转换为更易于管理的内容。我正在将服务器端代码转换为REST API，我想使用AngularJS来驱动UI。

我首先将应用程序的一个区域转换为三个屏幕。在一个屏幕中进行选择会为您提供一组新的选择，您可以前后移动。我已经设法通过使用路线非常干净地实现了这种行为;每个选项都是href='#/something...'的链接，这会通过加载不同的控制器/模板来改变UI状态。

我现在正试图制作这种转变的动画。 ng-animate属性通过enter和leave选项让我大部分都在那里，但这些实际上同时触发！结果在视觉上非常混乱。我理想地想要的是一种管理以下事件序列的简洁方法：

• 用户点击第一个屏幕中的按钮
• 第一个屏幕动画
• 同时，请求REST api进行下一组选择
• 完成前两项操作后，第二个屏幕将显示动画。

我可以通过resolve使用$routeProvider参数来实现此操作，但我不知道如何使动画正常工作！管理这种状态的正确方法是什么？

Answer 1

您可以编写自己的代码来实现动画，如下所述： http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate

所以也许可以这样做：

1. 在“离开”时，您启动动画并将请求发送到服务器。
2. 在“Enter”的同时，您不会立即开始动画。您正在等待来自数据加载器的信号。
3. 服务器响应数据。你发出信号已经准备好了。
4. “Enter”实现启动动画。

如何监视旗帜？您可以使用setTimeout简单地观察全局变量，但这有点难看。我认为使用某种允许您订阅“数据就绪”事件的发布/订阅机制会更好。例如，我使用postal.js并对它非常满意。