Dynamic routes for angularjs

Question

I want to have a routes that would look like such:

 $routeProvider.when('/trial/:extention/:id', {templateUrl: 'partials/quran.html', controller: 'QCtrl'});
 $routeProvider.otherwise({redirectTo: '/page/1'});

Where i can put '/trial/someExtention/1' or '/trial/someExtention/1/1/5'

Problem is, when I do '/trial/someExtention/1' it sends me to the otherwise route while I'd like for it to be able to do both without sending to otherwise

Answer 1

You can create a "catchall" route rule like this: :ids*

This tells the router to store everything after /:extension/ into the ids route-parameter. Your $routeProvider can look something like this:

$routeProvider
    .when( '/:extension/:ids*', { 
      templateUrl: 'this.html',
      controller: 'routeCtrl'
    })
    .when( '/that', { templateUrl: 'that.html' } )
    .otherwise( { redirectTo: '/that' } );

The /:extension/:ids* will then catch both "/Something/1" and "/Someotherthing/1/2/3". The ids route-parameter will in the last case have the value "1/2/3". You can split up this into an array if you want, like this in your controller:

$scope.ids = $routeParams.ids.split("/");

I have created a plunker here if you want to take a closer look: http://plnkr.co/edit/EZqMtnbRs0lKc07hnenQ?p=preview

Update: You can also specify optional route-parameters like this, if you don't want to store everything into a single id-variable:

$route$routeProvider
    .when( '/:extension/:id/:id2?/:id3?', { 
      templateUrl: 'this.html',
      controller: 'routeCtrl'
    })

The ? at the end signals that the parameter is optional.

Answer 2

So, basically for '/trial/someExtention/1' you configuration should work fine, just in case take a look at my fiddle http://jsfiddle.net/gRLLP/2/

If you want to catch both '/trial/someExtention/1' and '/trial/someExtention/1/1/5' with one rule, you may use new feature (as far as I remember it was introduced in v1.1.5):

set rule like this - '/trial/*extension/add' Details about * rule

BTW, here is the commit with changes

Answer 3

You can use templateUrl as function where you can play with your url parameters

$routeProvider.when('/subscriber/update/:action', {
    templateUrl: function(para){
       return 'partials/subscribers/'+ para.action +'.html';
    },
    controller: 'SubscriberController'
}).otherwise({
 redirectTo: '/'
});