1

I would like to implement finite netsing of ui router states (it is required by the client), the maximum depth of nesting can be a fixed value (for example 10) therefore i would like my states to look as such:

.state('page',{url:'page/{pageName}',templateUrl:...)
.state('page.page',{url:'/{pageName}',templateUrl:...)
.state('page.page.page',url:'/{pageName},templateUrl:...)
etc...

In the end i would like for user to be able to enter urls like:

'/page/page1/subpage1'
'/page/page2/subpage1/subsubpage2'
'/page/page3'
etc...

The obvious problem is that ui router will overwrite the 'pageName' variable for each (sub)state, therefore after navigating to /page/page1/subpage1 i will only have {pageName:'subppage1'} variable set in state 'page' and 'page.page'.

In the whole application the ui-sref would only use the RELATIVE states so when i am in the 'page' state i would go into 'page.page' state and so on. I would like to be able to move the html view of the page up or down the state hierarchy as needed, and i would like not to change every ui-sref call in such case (right now i would have to change the variable name because it has to have different name in every state)

Is there any possibility to achieve my desired scenario? i have tried defining 'pageName' as an array type, but it does not seem to work (gets overwriten for every substate). Using custom ui router type also seems to not work since it cannot modify stateParams objects, only returns the representation of single url value (therefore the 'pageName' is also overwritten). Ui-router extras also seems not to help here, or maybe i am missing something.

Pma
  • 1,063
  • 1
  • 16
  • 30
  • What if you define the states like url:'/pageName1', url:'/pageName2' and so on? – henrikmerlander Mar 14 '16 at 12:41
  • Hi, actually the page structure is to be configured by the user so i do not know in advance which urls will resolve to a working page. Therefore i have to assume that the page name (and its subpages) is an url variable and i do not know how many pages and subpages i will have. – Pma Mar 14 '16 at 13:24
  • Ok. What are you going to use the routes for if you don't know anything about them? I don't see how you would be able to reason about the routes (selecting controller, templates...) without knowing anything about them. – henrikmerlander Mar 14 '16 at 13:26
  • That is why i need some kind of "generic" route structure for nested pages which can be defined by the user. User should be able to edit pages and subpages (in a wiki-like manner) and in order for it to work with ui-router i need a flexible routing configuration which assumes no hardcoded page names. – Pma Mar 14 '16 at 13:36
  • Ok, then maybe a Single Page Application is not the right solution for your problem in the first place. I would consider some other architecture for creating a wiki-like website. – henrikmerlander Mar 14 '16 at 13:48
  • There is a detailed how to with a plunker http://stackoverflow.com/a/30230421/1679310 – Radim Köhler Mar 14 '16 at 14:18
  • Correct me if i am wrong but the above example is not exacly what i would like to have. I would like to still have multiple nested states. Imagine an example that i have a view located at /page/page1 with subview loaded via ui-sref=".page({pageName:'subpage1`'}). Therefore the /page/page1/subpage1 view is loaded. When i move the whole /page/page1 (with subpages) to new address: /page/page2/subpage1 this ui-sref will not work because the pageName variable can only be set for top level route and i would have to modify every ui-sref to change the 'pageName' to some other name – Pma Mar 15 '16 at 07:38

0 Answers0