Recursive ui router nested views

Question

I am trying to create a file viewer and I want to nest the subdirectories. I am using ui-router and I want each subdirectory to have its own URL and state.

Say I have the following structure:

Root
  |__Folder
  |__Folder
     |__SubFolder
        |__SubSubFolder

I want my routes to be:

files/:folderID/:SubFolderID/:SubSubFolderID

And I would like to do that recursively as opposed to creating a new state for each subdirectory

Radim Köhler · Accepted Answer · 2014-09-09 05:22:28Z

6

I would suggest, do it with one state and one param - folderPath. Because ui-router should have all the states defined soon enough, to support url routing. All these unique folderPath could differ, could be dynamic - in the runtime, in app life time.

Dynamic state definition is always an issue (if states are defined in app.run() it could happen that user comes to url which is not defined yet - otherwise is used... bad)

Dynamic url parameter - will work always. We just have to parse it in controller and decide next steps. Here is a working example.

The state and its param could be like this

.state('files', {
      url: '/files/{folderPath:[a-zA-Z0-9/]*}',
      templateUrl: 'tpl.files.html',
      controller: 'FileCtrl'
    });

Later we can dynamically generate navigation (links) like this:

<a href="#/files/Folder1">
<a href="#/files/Folder1/SubFolder1/">
<a href="#/files/Folder1/SubFolder1/SubFolderA">
<a href="#/files/Folder1/SubFolder1/SubFolderB">
<a href="#/files/Folder1/SubFolder2/SubFolderX">

check that in this example

answered Sep 9, 2014 at 5:22

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

1 Comment

pilau Over a year ago

That's perfect. It's not 100% handled but the router, but it can be worked with :)

Collectives™ on Stack Overflow

Recursive ui router nested views

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related