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

Answer 1

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