AngularJS – Roteador de UI – adiciona programaticamente estados

Existe uma maneira de adicionar estados programaticamente a $ stateProvider após a configuração do módulo, por exemplo, serviço?

Para adicionar mais contexto a essa questão, tenho uma situação em que posso seguir duas abordagens:

  1. tente forçar o recarregamento no estado definido na configuração do módulo, o problema é que o estado tem um reloadOnSearch configurado como false , então quando eu tento $ state.go (‘state.name’, {new: param}, {reload: verdade}); nada acontece, alguma ideia?

Definição de estado

.state('index.resource.view', { url: "/:resourceName/view?pageNumber&pageSize&orderBy&search", templateUrl: "/resourceAdministration/views/view.html", controller: "resourceViewCtrl", reloadOnSearch: false, }) 
  1. tente adicionar programaticamente estados que preciso carregar de um serviço, para que o roteamento funcione corretamente. Eu prefiro ir com a primeira opção, se possível.

Veja -edit- para informações atualizadas

Normalmente estados são adicionados ao $stateProvider durante a fase de configuração. Se você quiser adicionar estados em tempo de execução, precisará manter uma referência ao $stateProvider .

Este código não foi testado, mas deve fazer o que você quiser. Cria um serviço chamado runtimeStates . Você pode injetá-lo no código de tempo de execução e, em seguida, adicionar estados.

 // config-time dependencies can be injected here at .provider() declaration myapp.provider('runtimeStates', function runtimeStates($stateProvider) { // runtime dependencies for the service can be injected here, at the provider.$get() function. this.$get = function($q, $timeout, $state) { // for example return { addState: function(name, state) { $stateProvider.state(name, state); } } } }); 

Eu implementei algumas coisas chamadas Future States no UI-Router Extras que cuidam de alguns casos de canto para você, como mapear urls para estados que ainda não existem. Os estados futuros também mostram como você pode carregar com preguiça o código-fonte para estados de tempo de execução. Dê uma olhada no código-fonte para ter uma ideia do que está envolvido.

-edit- para UI-Router 1.0+

No UI-Router 1.0, os estados podem ser registrados e cancelados em tempo de execução usando StateRegistry.register e StateRegistry.deregister .

Para obter access ao StateRegistry, injete-o como $stateRegistry ou injetar $uiRouter e acessá-lo via UIRouter.stateRegistry .

O UI-Router 1.0 também inclui os Future States prontos para uso, que lidam com o carregamento lento de definições de estado, mesmo sincronizando por URL.

Chris T acertou em cheio! O provedor é o caminho a percorrer. Você não precisa colocá-lo no object da janela, protetor, mais protegido etc.

Cruzar sua resposta com este artigo realmente ajudou: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/#provider

A solução torna os módulos específicos $ stateProvider durante o bloco de configuração acessíveis a outros módulos durante seus blocos de execução.

Na minha situação, estou gerando dinamicamente estados do painel, dependendo das permissions de um usuário.

Durante meu bloco de configuração, meu provedor é configurado, passando o stateProvider do módulo (para ser acessado posteriormente).

 //in dashboard.module.js var dashboardModule = angular.module('app.modules.dashboard',[ 'app.modules.dashboard.controllers', 'app.modules.dashboard.services', 'app.modules.dashboard.presentations.mileage' ]) .provider('$dashboardState', function($stateProvider){ this.$get = function(PATHS, $state){ return { addState: function(title, controllerAs, templatePrefix) { $stateProvider.state('dashboard.' + title, { url: '/' + title, views: { 'dashboardModule@dashboard': { templateUrl: PATHS.DASHBOARD + (templatePrefix ? templatePrefix + '/' : '/') + title + '/' + title + '.view.html', controller: controllerAs ? controllerAs : null } } }); } } } }); 

Sim, é possível fazer isso, mas porque há camadas de cache envolvidas é complexo. Alex Feinberg documentou uma solução em seu blog aqui:

http://alexfeinberg.wordpress.com/2014/03/08/dynamically-populating-angular-ui-router-states-from-a-service/

O final do artigo inclui um exemplo de criação de um estado usando o stateProvider:

 app.stateProvider.state(ent.lob.name.toLowerCase(), { url: '/' + ent.lob.name.toLowerCase(), controller: ent.lob.name.toLowerCase() + 'Controller', templateUrl: 'lobs/views/' + ent.lob.name.toLowerCase() + '.html' }); 
Intereting Posts