Angular UI-Router parsing url containing slashes as part of state

I have nested state associated with a file path in a directory. That is, the URL for the view is similar to /workspace/path/to/my/file.txt

. Right now, just using /:path

doesn't work. How do I configure ui-router to accept a forward slash in the middle of a route?

angular.module('myApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('workspace.file', {
        url: '/:path',
        parent: 'workspace',
        views: {
          fileTabs: {
            templateUrl: 'app/workspace/workspace.file/file.html',
          }
        },
        controller: 'WorkspaceFileCtrl'
      });
  });

      

+3


source to share


2 answers


You will have to match the regex:

 url: '/{path:.*}' 

      

Or their catchcut syntax:



url: '/*path'

      

https://github.com/angular-ui/ui-router/wiki/URL-Routing

+1


source


There is a similar Q and A: - Recursive ui router nested views

So we can use a more precise regex expression:



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

      

Here is a plunker with an example

+2


source







All Articles