How to generate links in Angular UI Bootstrap Pagination

Question

I have been continuing learning angular and have now used the angular ui bootstrap pagination successfully. I am able to display the list of items together with the correct number of pages. And also switch to the correct page whenever I click on the pagination.

Now my question is if a user wanted to bookmark a certain page, or to make sure the user stays on the same page whenever he refreshes the browser, how do I go about it. There are no links (href) being generated on the address bar of the browser. Do I also need to set routes? Can you please post some examples, as it would greatly help me. Thanks.

Answer 1

We can do this with the $location, without needing $route.

Here is an example of how to call the pagination from Angular UI Bootstrap:

<pagination ng-model="Controls.currentPage"
            total-items="Controls.totalItems"
            items-per-page="Controls.videosPerPage"
            max-size="5"
            rotate="false"
            boundary-links="true"
            ng-change="pageChanged()">
</pagination>

Inside the pageChanged() function, use the following to create a unique URL for your results page:

** My code is on Coffeescript, but the logic is simple and the code easy to adapt **

$location.search('page', $scope.Controls.currentPage)

And on your controller, use the following to check, when starting, if the URL parameter is there:

urlParams = $location.search()
if urlParams.page?
  $scope.Controls.currentPage = urlParams.page
else
  $scope.Controls.currentPage = 1

Answer 2

You need to set up routes, you can do it using routeProvider or ui router

In this example, I use route provider to demonstrate, but the idea is the same.

Here I set up a route with currentPage as parameter:

app.config(function($routeProvider) {
  $routeProvider
    .when('/page/:currentPage', {
        templateUrl: "template.html",
        controller: PaginationDemoCtrl
    })
});

In your controller, you can retrieve the current page from $routeParam:

$scope.currentPage = $routeParams.currentPage || 1; //default to 1 if the parameter is missing
//load your paged data from server here.

You could just $watch current page for changes and update the location accordingly:

$scope.$watch("currentPage",function(value){
     if (value){
        $location.path("/page/" + value);
     }
  })

Source code

DEMO link

With routing, you also need to update your code to load paged data from server. We don't load data immediately when the currentPage changes (in this case is the $watch function). We load our paged data when we retrieve the $routeParam.currentPage parameter.

As requested by @Harry, here is another solution to generate href links by overwriting bootstrap html template:

app.config(function($routeProvider) {
  $routeProvider
    .when('/page/:currentPage?', {
        templateUrl: "template.html",
        controller: PaginationDemoCtrl
    })
})
.run(["$templateCache","$rootScope","$location", function($templateCache,$rootScope,$location) {

  $rootScope.createPagingLink = function(pageNumber){
    return "#" + $location.path().replace(/([0-9])+/,pageNumber);
//Here is a sample function to build href paths. In your real app, you may need to improve this to deal with more case.
  }

  $templateCache.put("template/pagination/pagination.html",
    "<ul class=\"pagination\">\n" +
    "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noPrevious()}\"><a ng-href=\"{{$root.createPagingLink(1)}}\">{{getText('first')}}</a></li>\n" +
    "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noPrevious()}\"><a ng-href=\"{{$root.createPagingLink(page - 1)}}\">{{getText('previous')}}</a></li>\n" +
    "  <li ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active}\"><a ng-href=\"{{$root.createPagingLink(page.number)}}\">{{page.text}}</a></li>\n" +
    "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noNext()}\"><a ng-href=\"{{$root.createPagingLink(page + 1)}}\">{{getText('next')}}</a></li>\n" +
    "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noNext()}\"><a ng-href=\"{{$root.createPagingLink(totalPages)}}\">{{getText('last')}}</a></li>\n" +
    "</ul>");
}]);

Source code

DEMO link