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

【问题标题】：AngularJS routing. Save and restore state on back buttonAngularJS 路由。在后退按钮上保存和恢复状态
【发布时间】：2015-05-29 14:35:53
【问题描述】：

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

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

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

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

【问题讨论】：

您可以像 ionic 一样通过删除历史记录来清除后退按钮上该路由模板的缓存。

标签： javascript angularjs url-routing

【解决方案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();

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

【讨论】：

【解决方案2】：

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

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

所以，重要的是：

在路由器中配置状态以接收页面参数

$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 () {...};
  });

【讨论】：