CODEWITHSUNDEEP
angularjsangular-ui-router
Chris
Chris

Reputation: 27384

Dynamic nested component views with UI Router

I have an Angular application that already uses UI Router. It currently uses nested views as most people do using the dot notation i.e. parent.childState.

However, it is now apparent that some parts of this application need to be reused elsewhere, lets call this Module A This module is tabbed and currently has a state associated with each tab. Currently, like most UI Router applications, the routes are set up during the application configuration phase.

With this new component Id like it to register its own routes, and that those routes are child routes of whatever parent view they are in.

Is this possible?

Upvotes: 1

Views: 726

Answers (1)

Walfrat
Walfrat

Reputation: 5353

You can do the following :

Declare a provider in your Module A which will be able to register all the components of your application where you want to insert your module. One of the parameter will be obvisouly the state prefix. This provider will call the $stateProvider internally, either when you call the provider's function, or when you instantiate the service that match to the provider (the $get).

If you choose the $get function you'll need to add an angular.run() to force the instantiation of the service resulting of the $get. Otherwise the $get will be called later and the states won't be mapped resulting in a $stateNotFound. This is usefull if you want to be able to overload some configuration before the $stateProvider is called, if you don't need that, don't use the $stateProvider in the $get function.

So now all you have to do in others module is to have a dependency on the Module A and use the said provider.

Upvotes: 1

Related Questions