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

Question

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

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

我需要做的是按下后退按钮时应用程序不关闭。 但是由于我没有向URL传递任何参数（因为URL从未更改），是否真的有一种很好的方法为移动设备上的后退按钮提供功能？

下面是一个代码示例，但我还包括了普拉克 ，试图更好地帮助澄清我的需要。

<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。