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

Question

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

1. 用户有一个具有搜索功能的项目列表(例如电影)。

2. 用户可以搜索和选择项目，单击它并在单独的 View 中查看详细信息。

3. 查看完项目后，他们可以单击浏览器后退按钮并返回到具有已恢复搜索选项的上一个列表以继续查看列表。

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

使用用户界面路由器。我从未使用过它，我想知道它是否提供了这种开箱即用的功能

Answer 1

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

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

这会将 ?searchTerm=jaws&genre=fishy&page=3 添加到您的 URL 并重新加载 Controller 。在 Controller 开始时，从 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;
 });

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

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

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

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