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', ['dotjem.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', ['dotjem.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) { }
      });
}]);

Note: The above doesn't use the Angular array notation for dependencies, this is to make the examples easier to read, you should use the array notation in production, or it won't work if minified.

On Exit Transition

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

angular.module('phonecat', ['dotjem.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', ['dotjem.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) { }
      });
}]);

Note: The above doesn't use the Angular array notation for dependencies, this is to make the examples easier to read, you should use the array notation in production, or it won't work if minified.