ui.router dynamic routing in angularjs

I have the following scenario. I am trying to write a route system for a dynamic sidebar. My sidebar consists of several items (at least 10) and each item has at least 1 tab(could be 3 or 5 …). the following should give an idea:

item1 -> tab1-tab2-tab3 …

item2 -> tabA-tabB-tabC …




itemX -> tabX-tabY-tabZ …

I know that using state $stateprovider you can set the url and templateUrl to load different html contents(external html files) depending on what the user clicks. So to accomplish that I would have to write a bunch of states and I feel that would be bad programming and there must be a way to do a dynamic routing depending on what the user clicks. I have googling it and I cant quite find the right answer for this.

The trick is that I have to use ui.router for this. Any ideas or guides that I can read/use to accomplish this?


I would assume that since your sidebar is dynamic that it’s coming from some data source. You could configure that datasource to have all the info you need for your routes or go with convention. Something like:

angular.forEach(states, function(state) {
    $stateProvider.state(state, {
            url: '/' + state, 
            templateUrl: 'views/' + state + '.html',
            controller: state + 'Controller'
      }) ;