javascript - 如何根据url更改页面

Question

我不希望能够根据 url 更改页面。我的网址看起来像这样 http://todolist.com/#/1 其中最后一个数字是页码。到目前为止，我的分页正在工作(angular ui bootstrap)。如果我尝试用分页行中的数字或按钮更改页面，页面将根据响应更改。但是 url 在 url 栏中没有改变，如果我手动更改 url，页面也不会改变。

这是我的 Controller

controllers.todoCtrl = function ($scope, $timeout, todoFactory, $location, $routeParams) {

    if($routeParams.pageNumber == undefined || $routeParams.pageNumber == null){
        $scope.currentPage = 1;
    } else {
        $scope.currentPage = $routeParams.pageNumber;
    }
    getData();

    //get another portions of data on page changed
    $scope.pageChanged = function () {
        getData();
    };

    /**
     * Get list of todos with pagination
     */
    function getData() {
        todoFactory.index($scope.currentPage).then(function (data) {
            $scope.totalItems = data.paging.count;
            $scope.itemsPerPage = data.paging.limit;
            $scope.todos = data.Todos;
        });
    }

我的路线

app.config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'app/templates/todolists.html',
        controller: 'todoCtrl'
    }).when('/:pageNumber', {
        templateUrl: 'app/templates/todolists.html',
        controller: 'todoCtrl'
    }).otherwise({ redirectTo: '/'});

我需要做什么才能使基于 url 的分页正常工作。如果您需要任何其他信息，请告诉我，我会提供。谢谢

Answer 1

可以使用$route的updateParams函数来更新url。

所以你的代码应该是这样的:

   //get another portions of data on page changed
    $scope.pageChanged = function () {
        //getData();
        $route.updateParams({pageNumber: $scope.currentPage});
    };

这将导致 url 发生变化。但是请记住，这会破坏并重新创建您的 Controller 。

我个人避免使用 Angular 路由器中的构建，而更喜欢使用 UI-Router反而。 UI-Router 使用基于状态的方法和漂亮干净的界面

因此，为了使用 UI-Router，您必须从 here 中获取它或使用您最喜欢的包管理器安装它。

您的路线将配置如下:

var app = angular.module('myApp', ['ui.router']);

app.config(function($stateProvider) {
  $stateProvider.state('home', {
     url: '/',
     templateUrl: 'app/templates/todolists.html',
     controller: 'todoCtrl'
  })
  .state("details", {
     url: '/:pageNumber',
      templateUrl: 'app/templates/todolists.html',
       controller: 'todoCtrl'
   });
});

正如您在上面的示例中看到的，状态通过 UI-Router 获取名称。您稍后可以在 Controller 和模板中使用这些名称来引用状态。除此之外，您还可以拥有嵌套状态。

Controller 中的示例:

controllers.todoCtrl = function ($scope, $timeout, todoFactory, $location, $state, $stateParams) {

    if(!$stateParams.pageNumber){
        $scope.currentPage = 1;
    } else {
        $scope.currentPage = $stateParams.pageNumber; 
    }
    getData();

    //get another portions of data on page changed
    $scope.pageChanged = function () {
        $state.go("details", {pageNumber: $scope.currentPage });
    };

    /**
     * Get list of todos with pagination
     */
    function getData() {
        todoFactory.index($scope.currentPage).then(function (data) {
            $scope.totalItems = data.paging.count;
            $scope.itemsPerPage = data.paging.limit;
            $scope.todos = data.Todos;
        });
    }