CODEWITHSUNDEEP
angularjsangularjs-routing
Digi314
Digi314

Reputation: 53

AngularJS nested routing

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?

Upvotes: 4

Views: 3279

Answers (1)

ocolot
ocolot

Reputation: 728

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.

Upvotes: 1

Related Questions