How to do nested routing using one template & controller in angularjs?

Question

I have a main template main.html, now I have say few links in this page.

  `<a href="albums/bollywood">bollywood </a>`
  <a href="albums/tollywood">tollywood </a>

Now in turn bollywood page, has again links
<a href="album/bollywood/hindi/"> Hindi </a>

Now in turn this page again have links as <a href="album/bollywood/hindi/old"> Old </a>

And chains goes on.

Now what I want is every url has one template to render. I want to have one configration as:-

`$routeProvider(when('/albums/:albumName),
 {
     templateUrl : 'albumsList.html',
     controller : 'albumsCtrl'
 })`

I want to specify that whateveer follows /albums/* , using $routeParams collect that value in albumName.

In my scenario,I don't see any need to need to use ui-routes.

Answer 1

You need to use * in $routeProvider that will match all the characters in the url, when : is used it will match all characters till / .

Change your code

$routeProvider(
when('/albums/:albumName),
 {
     templateUrl : 'albumsList.html',
     controller : 'albumsCtrl'
 })

To

$routeProvider(
when('/albums/:albumName*),
 {
     templateUrl : 'albumsList.html',
     controller : 'albumsCtrl'
 })