使用后退按鈕移動單頁應用程序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。