Ionic: using $ionicHistory to calm down the ion-nav-bar

Being working on a mobile app using Ionic for a while. Find Ionic is really nice to build hybrid mobile apps. However, one thing I find uncomfortable with while dealing with workflows.

Ionic provides a directive ion-nav-bar, which displays side-menu toggle or back button based on the history managed by $ionicHistory.

It works great except this tiny little thingy. For example, given we have three screens
– Events, to show a list of events
– Event Detail, to display the details of the event
– Update Event, to update the details of the event

The workflow is simple, the app shows the events, user go to the specific event and make some changes, then go back to the events page.


But then, the ion-nav-bar still shows the back button. This might be okay for iOS app, because there isn’t a physical back button. However, on Android, I tend to tap the back button to quit the app. But instead, I go backwards like a crazy time machine!

After a bit conversion with Dr. Google, it turns out we can prevent this by reseting the navigation history. It’s actually well documented in the $ionicHistory documentation.


RTFM aye

So here is the meat

historyRoot: true

I find it nice to be part of the resolving phase, here’s the full example.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s