Угловой маршрут и пагинация в angularJS

Question

Я делаю нумерацию страниц в 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);
    });
});

Вот моя реализация, все работает нормально, когда страница и нумерация страниц загружены правильно localhost:3000/search. Затем, когда я нажимаю на страницу 1,2,3, URL-адрес изменится на localhost:3000/search? Page=2

Но когда я вручную скопирую localhost:3000/search? Page=2 в адресную строку, он перенаправит мой URL обратно на localhost: 3000 / search

какие-либо намеки или идеи для реализации этого? А как на самом деле делает angularRoute провайдер?

Answer 1

Я бы использовал более Angular способ сделать это, ваш маршрут может быть /search/page/2, вы можете добавить параметры к вашему угловому маршруту, используя: параметры, это выглядит так:

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

Тогда у вас будет "страница" параметров, которые вы можете получить из вашего контроллера. Это может также работать, чтобы иметь что-то вроде: .when('/search?page=:page', { но я никогда не пробовал

Answer 2

Просто удали ?page в пути

Использовать этот:

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

Тогда в вашем контроллере:

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

LIVE DEMO