Uma forma organizada de usar o $stateProvider

Configurar as rotas é uma coisa bem comum nos aplicativos web. Uma das bibliotecas mais usadas para esse propósito
é a ui-router. Já tentou organizar a declaração de rotas de algum jeito diferente do padrão?

Nos artigos sobre a biblioteca, ou na própria documentação, vemos exemplos de uso do $stateProvider para declarar
estados da aplicação e controllers/templates ligados a esses estados. Mas será que existem formas melhores de fazer
isso?

Vamos ver primeiro um exemplo de como normalmente usamos o $stateProvider:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
angular.module('app').config(function ($stateProvider) {

$stateProvider.state('home', {
url: '',
templateUrl: 'views/home.html',
controller: 'HomeController'
});

$stateProvider.state('contact-list', {
url: '/contacts',
templateUrl: 'views/contacts/list.html',
controller: 'ContactListController'
});

// ...
});

Note que estamos repetindo a chamada do método $stateProvider.state para cada estado que precisamos declarar.
Além disso, eu considero o código um tanto ruim de ler rapidamente.

Nos apps que eu desenvolvo, adotei um padrão simples e que ajudou na organização das configurações de estados.
A diferença é pequena, mas significativa, pois eu consigo ver claramente o objeto de configuração e o nome do estado
ligado à essa rota.

Veja como eu declaro os estados:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
angular.module('app').config(function ($stateProvider) {
var states = {
'home', {
url: '',
templateUrl: '/views/home.html',
controller: 'HomeController'
},

'contact-list': {
url: '/contacts',
templateUrl: '/views/contacts/list.html',
controller: 'ContactListController'
}
};

angular.forEach(states, function (config, name) {
$stateProvider.state(name, config);
});
});

Ao longo do tempo esse arquivo vai crescer bastante. Ter uma visão rápida e alinhada dos nomes de estados torna a
leitura mais confortável em arquivos longos. Concorda?