One of the problems I’d previously had while developing a rather complex mobile app with the Angular-UI-Router was that the state.config file got pretty gnarly with more than a few abstract and nested states.

In the process of looking for a different solution, I came across a merge note that mentioned there’s now a way to use modular state.config files.

“Note: You still need to manage module dependencies.”

I don’t see a clear path to using this pattern & the BaseState class constructor pattern, but I still think we should convert to the modular version.

I suggest something like this:

app/states/state.coffee

angular.module('states', [
      'feature1',
      'feature2',
      etc.....
    ])
    .config(function($stateProvider) {
        $stateProvider.state('state', {...})
    });

app/states/feature1/feature1.state.coffee

angular.module('feature1', []).config(function($stateProvider) {
       $stateProvider.state('feature1.state0', {...})
       $stateProvider.state('feature1.state1', {...})
       $stateProvider.state('feature1.state2', {...})
    });