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

Using back button Mobile Single Page application AngularJS

本文关键字：单页 应用程序 AngularJS 移动 按钮      更新时间：2023-09-26

我正在使用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)">

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

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

否则，若要使应用具有状态并允许用户使用后退/前进按钮，你将需要使用 ui 路由器或角度路由。

相关文章：