Transition provider targeting multiple states

There is to ways to target multiple states for a transition handler. * Wildcard or Arrays.

Using Wildcards

By using * one can target all states the the Hierarchy below.

So if we just use * we target all existing states under root, and we can define a global handler that gets called on all transitions by using * both as destination and source.

angular.module('demo', ['ui.routing']).
  config(['$stateTransitionProvider', function($stateTransitionProvider) {
  $stateTransitionProvider
      .transition('*', '*', function($transition) { 
          console.log('This handler will get called for all transitions'); 
      })
}]);

We can also target all transitions to or from a specific state that way:

angular.module('demo', ['ui.routing']).
  config(['$stateTransitionProvider', function($stateTransitionProvider) {
  $stateTransitionProvider
      .transition('*', 'state', function($transition) { 
          console.log('This handler will get called for all'
                    + ' transitions to "state"'); 
      })
      .transition('state', '*', function($transition) { 
          console.log('This handler will get called for all'
                    + ' transitions from "state"'); 
      })
}]);

This was global handlers, but we might also wan't to target any state below a specific state:

angular.module('demo', ['ui.routing']).
  config(['$stateTransitionProvider', function($stateTransitionProvider) {
  $stateTransitionProvider
      .transition('*', 'state.*', function($transition) { 
          console.log('This handler will get called for all transitions to'
                    + ' "state" or any of its descendant states'); 
      })
      .transition('state.*', '*', function($transition) { 
          console.log('This handler will get called for all transitions from'
                    + ' "state" or any of it's descendant states'); 
      })
}]);

Using Arrays

In addition to using the ´*´ wildcart to target multiple states, it is also possible to use arrays for a more specific match.

angular.module('demo', ['ui.routing']).
  config(['$stateTransitionProvider', function($stateTransitionProvider) {
  $stateTransitionProvider
      .transition(['book', 'book.item', 'book.list'], 'paper', 
          function($transition) { 
              console.log('This handler will get called for transitions from'
                        + ' "book", "book.item" and "book.list" to "paper"'); 
          })
      .transition('paper', ['book', 'book.item', 'book.list'],
          function($transition) { 
              console.log('This handler will get called for transitions to'
                        + ' "book", "book.item" and "book.list" from "paper"'); 
          })
}]);

Since this really just iterates through the list and register the handler for each of the states, wildcards can also be used:

angular.module('demo', ['ui.routing']).
  config(['$stateTransitionProvider', function($stateTransitionProvider) {
  $stateTransitionProvider
      .transition(['book', 'book.item.*', 'book.list.*'], 
                  ['paper', 'pen.*'], function($transition) { 
          console.log('Handle all the above, this creates'
                    + ' to many combinations to write out'); 
      })
}]);