Transition provider stage handlers

Stage handlers refer to handlers that target specific stages a transition can have.

Basically this boils down to before, between, after. The flow of these will be:

1. Handler: Before
2. Event: $stateChangeStart
3. Resolve: Views, Dependencies etc.
4. Handler: Between
5. Event: $stateChangeSuccess or $stateChangeError
6. Handler: After

When registering a transition handler as a function, it will be the between handler we target. Like in the example below:

angular.module('door', ['dotjem.routing']).
  config(['$stateTransitionProvider', function($stateTransitionProvider) {
  $stateTransitionProvider
      .transition('*', '*', function($transition) { 
          console.log('This is the Between handler saying Hello!'); 
      })
}]);

If we wish to target before, after we need to provide an object as a handler defining which ones to target:

angular.module('door', ['dotjem.routing']).
  config(['$stateTransitionProvider', function($stateTransitionProvider) {
  $stateTransitionProvider
      .transition('*', '*', {
          before: function($transition) { 
              console.log('This is the Before handler saying Hello!'); 
          },
          between: function($transition) { 
              console.log('This is the Between handler saying Hello!'); 
          },
          after: function($transition) { 
              console.log('This is the After handler saying Hello!'); 
          }
      )
}]);

We don't have to define all of them, we could settle for just one or two of them.

angular.module('door', ['dotjem.routing']).
  config(['$stateTransitionProvider', function($stateTransitionProvider) {
  $stateTransitionProvider
      .transition('*', '*', {
          after: function($transition) { 
              console.log('This is the After handler saying Hello!'); 
          }
      )
}]);