如何根據網址更改網頁

Question

我無法根據網址更改網頁。我的網址看起來像這樣http://todolist.com/#/1最後一個號碼是頁碼。到目前爲止，我的分頁正在工作（角度ui bootstrap）。如果我嘗試使用分頁行中的數字或按鈕更改頁面，頁面將根據響應進行更改。但url不會在url欄中更改，如果我手動更改url，頁面不會更改。

這是我的控制器

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改變。但請記住，這將破壞並重新創建您的控制器。

就我個人而言，我避免使用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的路由器名稱。稍後可以在控制器和模板中使用這些名稱來引用狀態。除此之外，你可以有嵌套狀態。

例在你的控制器：

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; 
     }); 
    }