Correct way to manage UI state and animation with angularjs

Question

I'm beginning to convert a large web application, with a lot of complex JQuery DOM manipulation and an ASP.NET MVC backend, into something more manageable. I'm converting the server-side code into a REST API, and I want to use AngularJS to drive the UI.

I'm starting by converting one area of the app over, which consists of three screens. Making a selection in one screen presents you with a new set of choices, and you can move forward and back. I've managed to achieve this behavior very cleanly by using routes; each choice is a link with href='#/something...' , and this causes a change in UI state by loading a different controller/template.

I'm now trying to animate this transition. The ng-animate attribute gets me most of the way there with the enter and leave options, but these actually fire at the same time! The result is visually very confusing. What I'd ideally want is a clean way to manage the following sequence of events:

• User clicks on a button in the first screen
• First screen animates out
• At the same time, request is made to REST api for the next set of choices
• After the previous two things are complete, the second screen animates in.

I can achieve this without animation by using the resolve parameter to the $routeProvider , but I don't know how to make the animation work properly! What is the correct to manage this kind of state?

Answer 1

You can write your own code that will implement animation as described here: http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate

So perhaps it is possible to do it like this:

1. On "Leave" you start the animation and fire the request to the server.
2. At the same time on "Enter" you do not start the animation right away. You are waiting for the signal from data loader.
3. Server responds with data. You signal that this is ready.
4. "Enter" implementation starts the animation.

How monitor the flag? You can simply watch global variable with setTimeout, but this is kind of ugly. I think this would be much better to use some sort of pub/sub mechanism that would allow you to subscribe to "data ready" event. For example, I use postal.js and is quite satisfied with it.