How to create a global state change handler with ui-router - angularjs

Question

I'm building my first angular app and many of the major features are separated into their own modules. Each module registers its routes in config with $stateProvider.
I want to be able to handle $stateChangeStart/$stateChangeError in one place for my whole app so I can evaluate authorization and handle errors. How do I do this?
Currently I have this handler registered on $rootScope on my main module/app but if I navigate to a route from another module and then navigate to another route it does not fire. Why? In fact even $urlRouterProvider.otherwise("xyz"); no longer works.
I don't like copy pasting code so any solution that avoids putting this logic in every module would be appreciated.

Answer 1

You can try something like:
var app = {};
// Route Config for a "some" module.
function someModuleConfig($stateProvider) {
$stateProvider.
state('something', {
url: '/something',
templateUrl: 'path/to/something/something.html',
});
}
// Module definition for "some" module.
app.somemodule.module = angular.module('app.somemodule', []).
config(someModuleConfig);
// Route Config for the main module.
function appConfig($stateProvider, $urlRouterProvider) {
// Set the default redirect for any missing route.
$urlRouterProvider.otherwise('xyz');
$stateProvider.
state('home', {
url: '/',
templateUrl: 'path/to/home/home.html'
});
};
// Module definition for the main module.
app.module = angular.module('myapp', [
'ui.router',
app.somemodule.name
]).config(appConfig);
The key is that you can register your routes with the main module, and subroutes can be registered in other modules. You could also register all your routes in the main app module as well, depending on how you structure your code.