How can I make the angular.js route the long path

Question

I am making a file explorer with angular.js. so, I will deal with some long url,

eg:

mydomain/folder1/sub1/grand-sub1/.././

I just learn angular and find out that angular has the $routeProvider, but, it seems I should write lots of "when" to make this work (the template will not used if I don't define the "when").

does angular support "*" to make all of the sub dir's paths use the same template?

or, does any other method to handle this? Thx.

http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working — user1200750, Jan 17 '17 at 19:38

score 2 · Accepted Answer · edited May 23 '17 at 11:45

Since $routeProvider doesn't currently support wildcards (see here and the 2 links in the answer), you have to hack it up a little...

http://plnkr.co/edit/OuVRSrDUvdVF5yFDHnmM?p=preview

HTML

<a href="#/dir">/</a>
<br/>
<a href="#/dir/folder1">/folder1</a>
<br/>
<a href="#/dir/folder1/sub1">/folder1/sub1</a>
<br/>
<a href="#/dir/folder1/sub1/grandsub1">/folder1/sub1/grandsub1</a>
<br/>

JavaScript

app.controller('DirCtrl', function ($scope, $route) {
  var p = $route.current.params;

  $scope.path = '/';
  if (p.p1) $scope.path += p.p1;
  if (p.p2) $scope.path += '/' + p.p2;
  if (p.p3) $scope.path += '/' + p.p3;
  if (p.p4) $scope.path += '/' + p.p4;
  if (p.p5) $scope.path += '/' + p.p5;
});

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
    .when('/dir', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .when('/dir/:p1', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .when('/dir/:p1/:p2', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .when('/dir/:p1/:p2/:p3', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .when('/dir/:p1/:p2/:p3/:p4', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .when('/dir/:p1/:p2/:p3/:p4/:p5', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    /* add more as necessary */
    .otherwise({redirectTo: '/'});
});

It seems it is the only way I can do. Thanks a lot for your answer. — Leigh, May 17 '13 at 08:14

score 1 · Answer 2 · answered Sep 21 '13 at 22:49

Don't repeat yourself!

var dirRoute = {templateUrl: 'dir.html', controller: 'DirCtrl'};

$routeProvider
  .when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
  .when('/dir', dirRoute)
  .when('/dir/:p1', dirRoute)
  .when('/dir/:p1/:p2', dirRoute)
  .when('/dir/:p1/:p2/:p3', dirRoute)
  .when('/dir/:p1/:p2/:p3/:p4', dirRoute)
  .when('/dir/:p1/:p2/:p3/:p4/:p5', dirRoute)

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

Starting in AngularJS 1.2 (currently in release candidate phase), you can use wildcards to match more of a path. From the new documentation:

path can contain named groups starting with a colon and ending with a star (:name*). All characters are eagerly stored in $routeParams under the given name when the route matches.

For example, routes like /color/:color/largecode/:largecode*\/edit will match /color/brown/largecode/code/with/slashs/edit and extract:
color: brown
largecode: code/with/slashs.

It's worth nothing that you now have to include the extra angular-route.js file, as the routing layer is no longer included by default to save file size. Furthermore, your module must declare ngRoute as one of its dependencies. Your code would look like this:

var app = angular.module('app', ['ngRoute']);

app.controller('HomeCtrl', function ($scope, $route) {
});

app.controller('DirCtrl', function ($scope, $routeParams) {
  $scope.path = '/' + $routeParams.dir;
});

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
    .when('/dir/:dir*', {templateUrl: 'dir.html', controller: 'DirCtrl'})
    .otherwise({redirectTo: '/'});
});

Working example: http://plnkr.co/edit/BSPWYPnHM7GJRgNCAjoi?p=preview

How can I make the angular.js route the long path

3 Answers3

Linked