AngularJS – UI Router – aggiunge programmaticamente gli stati

C’è un modo per aggiungere programmaticamente stati a $ stateProvider dopo la configurazione del modulo, ad esempio, servizio?

Per aggiungere più contesto a questa domanda, ho una situazione in cui posso andare con due approcci:

  1. prova a forzare il ricaricamento sullo stato definito nella configurazione del modulo, il problema è che lo stato ha un reloadOnSearch impostato su false , quindi quando provo $ state.go (‘state.nome’, {nuovo: param}, {reload: vero}); non succede nulla, qualche idea?

Definizione dello stato

.state('index.resource.view', { url: "/:resourceName/view?pageNumber&pageSize&orderBy&search", templateUrl: "/resourceAdministration/views/view.html", controller: "resourceViewCtrl", reloadOnSearch: false, }) 
  1. tenta di aggiungere a livello di codice gli stati che devo caricare da un servizio in modo che il routing possa funzionare correttamente. Preferirei andare con la prima opzione, se ansible.

Vedi -edit- per informazioni aggiornate

Normalmente gli stati vengono aggiunti a $stateProvider durante la fase di configurazione. Se si desidera aggiungere stati in fase di esecuzione, è necessario mantenere un riferimento a $stateProvider giro.

Questo codice non è stato verificato, ma dovrebbe fare ciò che vuoi. Crea un servizio chiamato runtimeStates . È ansible iniettarlo nel codice runtime e quindi aggiungere stati.

 // 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); } } } }); 

Ho implementato alcune cose chiamate Future States in UI-Router Extras che si occupano di alcuni dei casi d’angolo per te come la mapping degli URL agli stati che non esistono ancora. Future States mostra anche come è ansible caricare il codice sorgente per gli stati runtime. Dai un’occhiata al codice sorgente per avere un’idea di cosa è coinvolto.

-edit- per UI-Router 1.0+

In UI-Router 1.0, gli stati possono essere registrati e cancellati in fase di esecuzione utilizzando StateRegistry.register e StateRegistry.deregister .

Per accedere a StateRegistry, iniettarlo come $stateRegistry o iniettare $uiRouter e accedervi tramite UIRouter.stateRegistry .

UI-Router 1.0 include anche Future States out of the box che gestisce il caricamento lazy delle definizioni di stato, persino la sincronizzazione per URL.

Chris T l’ha inchiodato! Il fornitore è la strada da percorrere. Non devi schiacciarlo sull’object finestra, risparmiatore, più protetto, ecc.

Il riferimento incrociato alla sua risposta con questo articolo è stato molto utile: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/#provider

La soluzione rende un modulo specifico $ stateProvider durante il blocco di configurazione accessibile ad altri moduli durante i blocchi di esecuzione.

Nella mia situazione sto generando dynamicmente gli stati del dashboard in base alle autorizzazioni dell’utente.

Durante il mio blocco di configurazione, il mio provider è impostato, passando lo StateProvider del modulo (a cui accedere in seguito).

 //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: { '[email protected]': { templateUrl: PATHS.DASHBOARD + (templatePrefix ? templatePrefix + '/' : '/') + title + '/' + title + '.view.html', controller: controllerAs ? controllerAs : null } } }); } } } }); 

Sì, è ansible farlo, ma poiché ci sono livelli di memorizzazione nella cache coinvolti è complesso. Alex Feinberg ha documentato una soluzione sul suo blog qui:

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

La parte finale dell’articolo include un esempio di creazione di uno stato utilizzando lo statoProvider:

 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' });