Question

我正在尝试使用AngularJs路由找出实现以下场景的最佳方法：

用户有一个具有搜索功能的项目列表（例如电影）。
用户可以搜索并选择项目，点击它并在单独的视图中查看详细信息。
完成查看项目后，他们可以点击浏览器后退按钮并返回上一个列表并使用已恢复的搜索选项继续查看列表。

默认ngRoute不提供任何状态概念，这必须单独实现（我想知道这里最好的解决方案是什么）

使用ui-router。我从来没有使用它，我想知道它是否提供了开箱即用的功能

Answer 1

要使后退按钮返回到搜索屏幕中页面所处的相同状态，请在URL中保存搜索参数，分页等状态：

 $location.search({"searchTerm": "jaws", "genre": "fishy", page: 3});

这会将?searchTerm=jaws&genre=fishy&page=3添加到您的URL并重新加载控制器。在URL的控制器设置变量的开始处：

 var searchTerm = $location.search().searchTerm;
 var genre = $location.search().genre;
 var page =  $location.search().page;
 SearchService.search(searchTerm, genre, page, function(data){
    $scope.results = data;
 });

现在当他们点击结果时，后退按钮将正常工作并重新加载控制器和参数。

如果您不希望浏览器历史记录在搜索屏幕中执行所有操作，并且只希望历史记录中记录的最后一个状态使用replace：

 $location.search({"searchTerm": "jaws", "genre": "fishy", page: 3}).replace();

现在历史记录将只有一个条目用于搜索屏幕，无论选择的选项的历史记录如何。

Answer 2

ui-router提供了轻松实现此功能的功能。这是完整的帖子：

http://www.codelord.net/2015/06/20/simple-pagination-and-url-params-with-ui-router/

所以，重要的是：

配置路由器中的状态以接收page参数

$stateProvider.state('list', {
  url: '/list?page',
  controller: 'ListCtrl',
  controllerAs: 'list',
  templateUrl: 'list.html',
  params: {
    page: {
      value: '1',
      squash: true
    }
  }
});

在控制器初始化时处理页面参数，并在每次更改页面时更新状态：

angular
  .module('your.module')
  .controller('ListCtrl', function ($state, $stateParams) {
    var vm = this;
    vm.page = parseInt($stateParams.page || '1'); // page param is a String
    loadStuffForList(); //Load elements for list

    vm.onPageChange = function () {
      $state.go('.', {'page': '' + vm.page});
      // or
      // $state.go('.', {'page': '' + vm.page}, {'notify': false}); // notify: false -> in case you need it, it will prevent the controller from reloading
      // loadStuffForList();
    };
    function loadStuffForList () {...};
  });

AngularJS路由。在后退按钮上保存和恢复状态

2 个答案: