使用后退按钮移动单页应用程序AngularJS

Question

我正在使用 AngularJS 创建单页应用程序 (SPA)，我想知道如何最好地使用移动设备上的后退按钮进行管理。

我创建了没有视图的应用程序。一个 js 表单，一个 html 页面，没有部分。该信息使用 ng-show 和一个控制器显示，该控制器根据分配给它们的标签编号帮助隐藏 <div> 标签。

我需要做的是让应用程序在按下后退按钮时不关闭。但是由于我没有将任何参数传递给 URL（因为 URL 永远不会改变），是否有一种非常好的方法可以为移动设备上的后退按钮提供功能？

这是一个代码示例，但我还添加了一个 plunk 以尝试更好地帮助澄清我的需求。

<div>
<a href ng-click="toggle = !toggle">=</a>
<ul ng-show="toggle">
  <li><a id="Home" ng-click="navi.selectTab(1); toggle = false">Home</a></li>
  <li><a id="About" ng-click="navi.selectTab(2); toggle = false">About</a></li>
  <li><a id="Contact" ng-click="navi.selectTab(3);  toggle = false">Contact</a></li>    
</ul>

<div ng-show="navi.isSelected(1)">

或 <div ng-show="navi.isSelected(2)"> 或

<div ng-show="navi.isSelected(3)">

Answer 1

如果您只是想阻止后退按钮立即离开 SPA，您可以使用 window.onbeforeunload() 警告用户后退按钮将退出应用程序。

window.onbeforeunload = function () {
   return "Are you sure you want to leave?"
}

否则，要让您的应用程序有状态并允许用户使用后退/前进按钮，您将需要使用 ui-router 或 angular-routes。