CODEWITHSUNDEEP
angularjspaginationangularjs-routing
Nich
Nich

Reputation: 1102

Angular Route & pagination in angularJS

I'm doing a pagination in angular-ui-bootstrap

searchapp.config(function ($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $routeProvider
    .when('/search?page', {
      controller: 'classifiedAdController',
      reloadOnSearch: false
  });
});

searchapp.controller('classifiedAdController', function ($scope, $location, $routeParams, ClassifiedAd) {
$scope.$watch('currentPage', function(page) {
      console.log(page);
      $location.search('page', page);
    });
});

here is my implementation, everything work fine when the page and pagination is load properly localhost:3000/search. Then when I click page 1,2,3, the url will change to localhost:3000/search?page=2

But when I manually copy localhost:3000/search?page=2 in the addressbar, it will route my url back to localhost:3000/search

any hints or idea to implement this? And how actually angularRoute provider do?

Upvotes: 1

Views: 3109

Answers (2)

Raghavendra
Raghavendra

Reputation: 5387

Just remove ?page in route

Use this:

$routeProvider
    .when('/search', {
        controller: 'classifiedAdController',
        reloadOnSearch: false
    });

Then in your controller:

  $scope.$watch(function() {
      return $location.search().page
  }, function(newVal, oldVal) {
      $scope.page = newVal;
  });

LIVE DEMO

Upvotes: 0

ex0ns
ex0ns

Reputation: 1116

I would have use a more Angular way to do so, your route could be /search/page/2, you can add parameters to your angular route using :parameters, it look like:

  $routeProvider
    .when('/search/page/:page', {
       controller: 'classifiedAdController',
       reloadOnSearch: false
   });

Then you will have a "page" parameters you can retrieve from your controller. It might work as well to have something like: .when('/search?page=:page', { but I never tried

Upvotes: 1

Related Questions