How to avoid big state config function in large applications

[ffesseler]

I'm writing a large app, up to 4 level deep navigation with URL routing.
I've declared all states in the main app module. That means I've something like :

angular.module('myApp').config(function ($stateProvider) {
$stateProvider
.state("toplevelfeature", { url : '/topleavelFeature'...})
.state("toplevelfeature2", { url : '/topleavelFeature2'...})
.state("toplevelfeature.midfeature", { url : '/midFeature'...})
.state("toplevelfeature.midfeature2", { url: '/midFeature2...})
.state("toplevelfeature.midfeature.anothernestedfeature", { url: '/anothernestedfeature...})
});

I've already defined a dozen of states and I know I will have to handle at least 50 other ones. Obviously, I'd like to split state definitions to avoid a giant config method!
For now, each feature get its own module so I thought I would be able to do something like this :

angular.module('anothernestedfeature').config(function ($stateProvider) {
$stateProvider
.state("toplevelfeature.midfeature.anothernestedfeature.home", {...})
.state("toplevelfeature.midfeature.anothernestedfeature.detail", {...})
.state("toplevelfeature.midfeature.anothernestedfeature.other", {...})
});

Unfortunately, when I do that, there is an error saying parent state (here: toplevelfeature.midfeature) can't be found.

Any idea about this? (Sorry If I'm not on the right place to ask this but I didn't find any information about where to ask these kind of questions)

[jeme]

Out of curiosity, what would you hope to gain from defining the routes under a different module, other than that they conceptually belongs under those modules?

It should be possible to keep them in separate files, yet using the same module name for configuring routes as a workaround for now.

So like:

File1.js

angular.module('myApp').config(function ($stateProvider) {
$stateProvider
.state("toplevelfeature", { url : '/topleavelFeature'...})
.state("toplevelfeature2", { url : '/topleavelFeature2'...})
.state("toplevelfeature.midfeature", { url : '/midFeature'...})
.state("toplevelfeature.midfeature2", { url: '/midFeature2...'})
.state("toplevelfeature.midfeature.anothernestedfeature", { url: '/anothernestedfeature...'})
});

File2.js

angular.module('myApp').config(function ($stateProvider) {
$stateProvider
.state("toplevelfeature.midfeature.anothernestedfeature.home", {...})
.state("toplevelfeature.midfeature.anothernestedfeature.detail", {...})
.state("toplevelfeature.midfeature.anothernestedfeature.other", {...})
});

[ksperling]

You can configure routes in separate modules already. You need to ensure that you declare your dependencies between modules via the angular.module function though: If module B defines sub-states of states defined in module A, then B needes to depend on A. That way angular will run the config functions of A before those of B, and everything will work fine.

[ffesseler]

Thanks for your answer, I've spend some time thinking about both solutions.

@jeme Your solution is interesting & looks simple to implement at first but it requires your load your JS file in a specific order. It's becoming difficult to maintain escpecially when you start splitting children state definitions in different files.

I prefer @ksperling solution. The only drawback is you should declare the dependendicies in 'reverse' order which is a bit counter-intuitive at first : If I have a 4 level deep navigation, my main module should declare a dependency to the deepest module level which has a dependency to the 3rd level module which has a dependency to the 2nd level module and so on

[simalexan]

The question and the answers were helpful, but if its no problem for someone to write a proper working example to the wiki. Thanks in advance

[jeme]

@simalexan I have added a "pull-to-faq" label and created issue #93 so this can be done at some point.

[simalexan]

Thank you @jeme !

[lucassus]

Here you could find my proposal. It's based od es6 modules
#1051 (comment)

[ProLoser]

I believe states don't have to be declared in order anymore as long as the entire ancestry exists before entering the state. Or linking to it?

I add states to every module, I don't declare them in one place in any capacity. I also further attempt to decouple the ancestry by mixing in the use of a parent property. Children within a module use dot notation and the top route of the module uses a parent property. This way you can easily refactor your modules without having to update many different places. I have nesting modules and parent modules import child modules.

I also don't think I see a big benefit to exporting just the state definition because you shouldn't be importing the file if you don't want the state defined.