ui.router dynamic routing in angularjs

Question

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?

Have you looked at the documentation for decorator? angular-ui.github.io/ui-router/site/#/api/… "This can be used to add custom functionality to ui-router, for example inferring templateUrl based on the state name." — JoseM
– JoseM, Commented Oct 7, 2015 at 14:37
0 down vote accept I actually took a different path. I had a json object where I was building the tabs from and figured that since I already have this object I would just add a path property to the json obj and have a for loop iterate the json and build my states in the config phase. It works and displays different .html files for each tab. I will definitively drill down more into decorate, it seems another better way of doing what I need. Thanks!!! — Mauricio
– Mauricio, Commented Oct 7, 2015 at 20:07

sanjeev shetty · Accepted Answer · 2021-04-10 21:03:56Z

2

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

edited Apr 10, 2021 at 21:03

sanjeev shetty

4584 silver badges17 bronze badges

answered Oct 7, 2015 at 19:56

Mike Feltman

5,1761 gold badge19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mauricio Over a year ago

Yes, that is what I ended up doing. The only problem that Im debugging is that when I click on itemA and tabA previously having clicked on item1 and tab1, the content still remains there ... Any way to reset to blank the content when a new item is click from the sidebar?

Mike Feltman Over a year ago

That should happen automatically. I was gonna post a code snippet, but they really suck in comments. You should probably accept the answer above and then open a new question. I'm assuming you have something like <div ui-view>Nothing to see here yet</div> in your index.html.

Collectives™ on Stack Overflow

ui.router dynamic routing in angularjs

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related