How to do variable routing in angular js

Question

I have this problem & I am unable to find the solution for it. This is an example of code where I am trying to route to variable URL routing

$routeProvider.when('/Book', {
    template: 'examples/book.html',
    controller: BookCntl,
});
$routeProvider.when('/Book/chapter01', {
    template: 'examples/chapter01.html',
    controller: ChapterCntl,
});

If I want to fix the url till /Book/chapter and 01 can be a variable. Like if user changes 02 or 03 till 100. Do I need to write the $routeProvider 100 times or can be a simple solution, where I can use the number part as a variable and write single $routeProvider to handle 01 to 100?

Answer 1

No, you do not need to add 100 seperate route definitions. You add a variable to your url template by adding /:some_variable, and then you are to fetch that variable by using the $routeParams service.

Example

$routeProvider.when('/Book/chapter/:chapterid', {
   templateUrl: 'examples/chapter-view.html',
   controller: ChapterCntl,
});

And then inject $routeParams into your controller:

function ChapterCntl($routeParams) {
   var chapterId = $routeParams.chapterid;

   //use the id to fetch content.
}

It does seem like you have a different html page for each chapter. If that is the case you can set a function to the template field to generate the path for the html file:

$routeProvider.when('/Book/chapter/:chapterid', {
   template: function(routeParams) {
      var id = routeParams.id;
      return 'examples/chapter'+id+'.html';
   },
   controller: ChapterCntl,
});

If that case is that you are fetching the data from an API through a service, it might be useful to be using the resolve field instead. The resolve field will loaded the data and be injectable into the controller. Which means that the data will be loaded before transitioning in to the new route.

$routeProvider.when('/Book/chapter/:chapterid', {
   templateUrl: 'examples/chapter-view.html',
   controller: ChapterCntl,

   //Will run the below function before transitioning into new route.
   resolve: {
      chapter: function($routeParams, chaptersDataService) {
         var id = $routeParams.chapterid;
         return chaptersDataService.getChapter(id);
      }
   }
});

And the inject the chapter into your controller:

function ChapterCntl($scope, chapter) {
    $scope.chapter = chapter; 
    console.log( chapter );
}

Answer 2

Have you considered UI Route Provider? You could easily use stateparams..

$stateProvider
    .state('book.chapter', {
        url: "/book/chapter/:chapterId",
        templateUrl: 'book.chapter.detail.html',
        controller: function ($stateParams) {
          ....
        }
})

Sources: https://github.com/angular-ui/ui-router/wiki/url-routing#url-parameters http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider

You could also stick with routeprovider in a slightly different way than suggested in other answers.

$routeProvider.when('/Book/:chapter', {
            templateUrl : { function (dynamicUrl) {
               return '/Book/' + dynamicUrl.chapter + '.html';
            },
            controller: 'ChapterCntl'
});