Transition provider basic configuration

Configuration of the $stateTransitionProvider is done using the transition method. Transitions are not dependent on that the targeted states actually exists, that way it can be configured independently from states.

However, if a targeted state doesn't exist at any given point in the web applications life time, the handler registered with that transition can never be triggered.

The example below shows a simple example targeting 3 states.

angular.module('door', ['dotjem.routing']).
  config(['$stateTransitionProvider', function($stateTransitionProvider) {
  $stateTransitionProvider
      .transition('locked', 'closed', function($transition) { 
          console.log('Door was unlocked'); 
      })
      .transition('locked', 'open', function($transition) { 
          console.log("Can't open a locked door!");
          $transition.cancel();
      })
      .transition('open', 'closed', function($transition) {
          console.log('Door was closed'); 
      })
      .transition('open', 'locked', function($transition) {
          console.log("Can't lock an open door!");
          $transition.cancel();
      })
      .transition('closed', 'open', function($transition) {
          console.log('Door was opened'); 
      })
      .transition('closed', 'locked', function($transition) {
          console.log('Door was locked'); 
      })
}]);

As we can see here, this allows us to somewhat get closer to the behavior of a real state machine, even though we are not defining actions or events which would be the traditional way to think of it, instead those are implicit to us.

The reason that it is turned around this way is that by default, we expect that any one state could transition legally to any other state, which would mean that we could end writing thousands of actions to support all possible permutations.

With the $stateProvider as it is, we don't have to do that.