AngularJS nested routing

Question

I'm working a fairly simple AngularJS project with some deep route nesting to select from a nested data structure:

angular.module('doccat', []).
 config(['$routeProvider', function($routeProvider) {
     $routeProvider.
         when('/',                    { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         when('/:p0',                 { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         when('/:p0/:p1',             { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         when('/:p0/:p1/:p2',         { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         when('/:p0/:p1/:p2/:p3',     { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         when('/:p0/:p1/:p2/:p3/:p4', { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         otherwise({ redirectTo: '/' });
 }]);

function DocDetailCtrl($scope, $routeParams) {
   var path = [];
   if ($routeParams.p0) path.push($routeParams.p0);
   if ($routeParams.p1) path.push($routeParams.p1);
   if ($routeParams.p2) path.push($routeParams.p2);
   if ($routeParams.p3) path.push($routeParams.p3);
   if ($routeParams.p4) path.push($routeParams.p4);

   // do stuff with  path
}

This has up to 5 layers in the path, which should be plenty for my purposes, so it is good enough for now. However, the underlying data could be nested arbitrarily deep, which would require arbitrary routing.
I think the ideal for this would be a route that says 'all the rest of the path goes to any array of parameters', but it doesn't look like there is a way to do anything like that in AngularJS. Just for the sake of completeness, does anyone know of a way to do this?

Alan Wells · Accepted Answer · 2014-05-12 03:36:13Z

1

Check $routeProvider in the doc angularjs $routeProvider.

Especially, in the definition of 'when', you can read: "path can contain named groups starting with a star (*name). All characters are eagerly stored in $routeParams under the given name when the route matches." So you just need to make sure the route matches and you'll get plenty parameters stored in $routeParams.

I hope it helps.

edited May 12, 2014 at 3:36

Alan Wells

31.4k16 gold badges113 silver badges164 bronze badges

answered Jun 26, 2013 at 22:12

ocolot

7286 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

AngularJS nested routing

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related