State provider transitions

Transitions are more thoroughly covered under the Transition Provider section.

But since the $stateProvider provides a number of sort hands for certain transitions, those will be covered here.

On Enter Transition

On enter transitions can be defined directly on a state like so:

angular.module('phonecat', ['ui.routing']).
  config(['$stateProvider', function($stateProvider) {
  $stateProvider
      .state('phones', { onEnter: function($transition) { } })
      .state('tablets', {
          onEnter: {
              from: 'phones', handler: function($transition) { } 
          } 
      })
      .state('convertible', {
          onEnter: {
              from: '*', handler: {
                  before: function($transition) { },
                  between: function($transition) { },
                  after: function($transition) { }
              }
          } 
      })
}]);

All these are just special case transitions and can be defined like below as well:

angular.module('phonecat', ['ui.routing']).
  config(['$stateTransitionProvider', function($stateTransitionProvider) {
  $stateTransitionProvider
      .transition('*', 'phones', function($transition) { })
      .transition('phones', 'tablets', function($transition) { })
      .transition('*', 'convertible' {
          before: function($transition) { },
          between: function($transition) { },
          after: function($transition) { }
      });
}]);

On Exit Transition

Very similar to On Enter, On Exit can be defined directly on a state.

angular.module('phonecat', ['ui.routing']).
  config(['$stateProvider', function($stateProvider) {
  $stateProvider
      .state('phones', { onExit: function($transition) { } })
      .state('tablets', {
          onExit: {
              to: 'phones', handler: function($transition) { } 
          } 
      })
      .state('convertible', {
          onExit: {
              to: '*', handler: {
                  before: function($transition) { },
                  between: function($transition) { },
                  after: function($transition) { }
              }
          } 
      })
}]);

And again, just as with on enter, these are just special case transitions and can be defined like below as well:

angular.module('phonecat', ['ui.routing']).
  config(['$stateTransitionProvider', function($stateTransitionProvider) {
  $stateTransitionProvider
      .transition('phones', '*', function($transition) { })
      .transition('tablets', 'phones', function($transition) { })
      .transition('convertible', '*' {
          before: function($transition) { },
          between: function($transition) { },
          after: function($transition) { }
      });
}]);