See -edit- for updated information

Question

32

AngularJS - UI Router - programmatically add states

rated 0 times [ 38] [ 6] / answers: 1 / hits: 40325 / 10 Years ago, tue, september 16, 2014, 12:00:00

Is there a way to programmatically add states to $stateProvider after module configuration, in e.g. service ?

To add more context to this question, I have a situation where I can go with two approaches:

try to force the reload on the state defined in the module configuration, the problem is that state has a reloadOnSearch set to false, so when I try $state.go('state.name', {new:param}, {reload:true}); nothing happens, any ideas ?

State definition

.state('index.resource.view', {

  url: /:resourceName/view?pageNumber&pageSize&orderBy&search,

  templateUrl: /resourceAdministration/views/view.html,

  controller: resourceViewCtrl,

  reloadOnSearch: false,

})

try to programmatically add states that I need to load from a service so routing can work properly. I'd rather go with the first option if possible.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stefanicarolinat

Add To Favorites

Follow

Total Points: 145

Total Questions: 91

Total Answers: 93

Location: Cambodia

Member since Thu, Oct 7, 2021

3 Years ago

stefanicarolinat questions

1 Cannot fetch data from localhost using Sveltekit

Mon, Nov 15, 21, 00:00, 3 Years ago

1 Add nonce to script tag

Fri, Apr 16, 21, 00:00, 3 Years ago

1 How do you input an ASCII art image into the console in JS?

Thu, Oct 15, 20, 00:00, 4 Years ago

1 jest: How to teardown after (just) an individual test

Fri, Jul 17, 20, 00:00, 4 Years ago

1 How to run code (Google/Doubleclick Ads) without block main thread

Tue, Nov 26, 19, 00:00, 5 Years ago

View All

answered 10 Years ago aidan · Accepted Answer

See -edit- for updated information

Normally states are added to the $stateProvider during the config phase. If you want to add states at runtime, you'll need to keep a reference to the $stateProvider around.

This code is untested, but should do what you want. It creates a service called runtimeStates. You can inject it into runtime code and then add states.

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

      }

    }

  }

});

I've implemented some stuff called Future States in UI-Router Extras that take care of some of the corner cases for you like mapping urls to states that don't exist yet. Future States also shows how you can lazy load the source code for runtime-states. Take a look at the source code to get a feel for what is involved.

-edit- for UI-Router 1.0+

In UI-Router 1.0, states can be registered and deregistered at runtime using StateRegistry.register and StateRegistry.deregister.

To get access to the StateRegistry, inject it as $stateRegistry, or inject $uiRouter and access it via UIRouter.stateRegistry.

UI-Router 1.0 also includes Future States out of the box which handles lazy loading of state definitions, even synchronizing by URL.