Using back button Mobile Single Page application AngularJS

Question

I'm using AngularJS to create a Single Page App (SPA) and am wondering how best to manage using the back button on mobile devices.

I created my application without views. One js form, one html page and no partials. The info is displayed using ng-show and a controller that helps hide <div> tags according to tab numbers assigned to them.

What I need to happen is for the application to NOT CLOSE when the back button is pushed. But since I am not passing any params to the URL (because the URL never changes) is there a really good way to give functionality to the back button on the mobile device?

Here's a code sample, but I also included a plunk to try and better help clarify my need.

<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)">

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

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

Pascal Winter · Accepted Answer · 2015-12-16 18:49:10Z

1

If you're simply looking to prevent the back button from leaving the SPA right away, you could use window.onbeforeunload() to warn the user that the back button will exit the app.

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

Otherwise to get your app to be stateful and allow the user to use back/forward buttons, you will want to use ui-router or angular-routes.

answered Dec 16, 2015 at 18:49

Pascal Winter

1142 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

heb-NR Over a year ago

Ok. I can use this as an option. I was trying to avoid using the ui-router.

heb-NR Over a year ago

I've messed around with this a bit and even expanded my reading on it to try and better understand it, but this function doesn't seem to be working for me. @pascal-winter

Collectives™ on Stack Overflow

Using back button Mobile Single Page application AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related