RFC: $transition$ injectable promise

I’ve been working on the “transition service” idea that’s been tossed around here. See this commit in ui-router-extras: https://github.com/christopherthielen/ui-router-extras/commit/92c4f81208f07ff740399e8d81e218732b9f7469

So far, I have implemented and tested

• $transition$: an injectable object which contains:
  • the to state/params
  • the from state/params
  • a promise which wraps the $state.transitionTo() promise
• $transitionStart: a new event, fired in response to $stateChangeStart which exposes the $transition$ object/promise
• $transitionSuccess and $transitionError Mirrors $stateChangeSuccess/Error, but are broadcasted based on the promise. I’m not sold on these, they seem perhaps unnecessary, but I put them in because it was ridiculously easy to do so.

---

$transition$

The $transition$ object contains the details of the current transition, to: { state: toState, params: toParams} and from: { state: fromState, params: fromParams } }. It also has promise which is resolved when the promise returned by $state.transitionTo() is resolved.

$transition is injectable as long as the transition is currently in process. This means it can be injected into onEnter/onExit/controller functions.

$transitionStart

The $transitionStart event fires in response to $stateChangeStart. This event exposes $transition to interested parties. Since $transitionStart exposes $transition$, it allows interested parties to listen for transitions, then process them using promises, which was impossible using $stateChangeStart.

benefits

• Listen for state changes, respond using promises. When listening for $stateChangeStart/Success/Error, there is a separation between the starting event and the terminating event. One also has to listen for both Success and Error events to connect the dots.
• Inject current transition into code invoked while the transition is pending. Currently, onEnter/Exit/controller don’t know why they are being invoked. For example, the onEnter doesn’t know if the destination state is that specific state, or some substate.
• ??? other things?
• Profit!!!

closes

I believe this change would address the following:

https://github.com/angular-ui/ui-router/issues/1169 https://github.com/angular-ui/ui-router/issues/1182 https://github.com/angular-ui/ui-router/issues/1153 https://github.com/angular-ui/ui-router/issues/1151 https://github.com/angular-ui/ui-router/issues/1112 https://github.com/angular-ui/ui-router/issues/1100 https://github.com/angular-ui/ui-router/issues/1085 https://github.com/angular-ui/ui-router/issues/1016 https://github.com/angular-ui/ui-router/issues/575 https://github.com/angular-ui/ui-router/issues/238 https://github.com/angular-ui/ui-router/issues/23

[christopherthielen]

This is ready to go in 1.0; closing

[DumboJet]

I am trying to prevent a transition on some occasions like that (and then use $state.go to re-initiate if needed):

$rootScope.$on("$transitionStart", function (event, $transition$) {
           if (isEditing()) {
                      event.preventDefault();
                      //.... Other stuff
           }
}

But event.preventDefault(); seems to do nothing and the transition DOES happen. How can I achieve that? Thanks in advance!

UPDATE: I have changed your lib like so:

              var evt2 = $rootScope.$broadcast("$transitionStart", tData);
              if (evt2.defaultPrevented) evt.preventDefault();

…but then it still calls the callback of the $state.go(...).then() function. 😦 Any idea how to avoid that too?

UPDATE 2: OK. That was the best that I could find so far:

          // Decorate $state.transitionTo.
          $state.transitionTo = function (to, toParams, options) {
            // Create a deferred/promise which can be used earlier than UI-Router's transition promise.
            var deferred = $q.defer();
            // Place the promise in a transition data, and place it on the stack to be used in $stateChangeStart
            var tData = tDataStack[++transitionDepth] = {
              promise: deferred.promise
            };
            // placeholder restoreFn in case transitionTo doesn't reach $stateChangeStart (state not found, etc)
            restoreFnStack[transitionDepth] = function() { };
            // Invoke the real $state.transitionTo
            var tPromise = $state_transitionTo.apply($state, arguments);

              // insert our promise callbacks into the chain.
            if (tData.defaultPrevented) {
                throw '';
            }
            return tPromise.then(transitionSuccess(deferred, tData), transitionFailure(deferred, tData));
          };

          // This event is handled synchronously in transitionTo call stack
        $rootScope.$on("$stateChangeStart", function(evt, toState, toParams, fromState, fromParams) {
                var depth = transitionDepth;
                // To/From is now normalized by ui-router.  Add this information to the transition data object.
                var tData = angular.extend(tDataStack[depth], {
                    to: { state: toState, params: toParams },
                    from: { state: fromState, params: fromParams }
                });

                var restoreFn = decorateInjector(tData);
                restoreFnStack[depth] = restoreFn;
                var evt2 = $rootScope.$broadcast("$transitionStart", tData);
                if (evt2.defaultPrevented) {
                    evt.preventDefault();
                    tDataStack[depth].defaultPrevented = true;
                }
            }
        );

I throw an error to stop the transition. Not good, but does the job… But that prevents the $state.go(...).then() function from being called on successful transitions. 😦 Please inform me if there is another way.

(Note: the code is from transition.js)

Thanks. 😃