Em resumo, toda aplicação centralizadora deve possuir um arquivo de configuração responsável por gerenciar o mapeamento de rotas do AngularJS para atender as necessidades da aplicação. As rotas estáticas devem ser adicionadas diretamente ao $stateProvider, as demais views da aplicação irão ser carregadas por exceção através do 'otherwise' do $urlRouterProvider.

Utilizando como base a aplicação de referencia, temos esta configuração definida no arquivo config-states.js. Esta configuração tem alta dependência da estrutura de pastas definida para as aplicações.

Por padrão, temos 2 modos de adicionar uma página a aplicação:

Estático

As páginas estáticas normalmente estão relacionas a aplicação de centralizadora. Normalmente páginas de configuração, informações e outras. Estas páginas podem ser adicionadas diretamente ao $stateProvider do AngularJS por não possuírem estados.

appStateConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function appStateConfig($stateProvider, $urlRouterProvider) {
        
    // Views padrões da aplicação que não possuem 'states'.
    $stateProvider.state(
    	'about', {
        	url: '/html-app/about',
            templateUrl: '/html-app/html/about.html'
        }
	).state(
    	'blank', {
        	url: '/',
        	templateUrl: '/html-app/html/blank.html'
		}
	);
} // appStateConfig

index.config(appStateConfig);

Dinâmico

Ao contrário das páginas estáticas as views dinâmicas possuem diferentes estados e confiam fortemente na estrutura definida para as aplicações. No caso da aplicação de referencia a chamada das views pode ser realizada a outros contextos, permitindo assim segmentar as aplicações. Entretanto, cada segmento da aplicação deverá seguir a estrura padrão para que seja possível a interação das aplicações convencionais com a centralizadora. Por convenção neste exemplo utilizamos a seguinte especificação:

    - <contexto da aplicação>/<contexto da view>/html/<view>/<view>.js

O arquivo <view>.js deverá ser um descritor de 'estados' para a view. Por padrão o framework procura por um 'state' do tipo '.start' para iniciar a view caso não seja especificado um 'state' na própria chamada.

appStateConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function appStateConfig($stateProvider, $urlRouterProvider) {
    
	index.stateProvider = $stateProvider;

    // Views padrões da aplicação que não possuem 'states'.
    $stateProvider.state(
    	'about', {
        	url: '/html-app/about',
            templateUrl: '/html-app/html/about.html'
        }
	).state(
    	'blank', {
        	url: '/',
        	templateUrl: '/html-app/html/blank.html'
		}
	);
} // appStateConfig

index.config(appStateConfig);