I ran into a few challenges recently while adding new Angular.js functionality to my own homepage. My goal was to create a one page-style app to demonstrate my projects a bit better and to just get more experience utilizing Angular. I’m very satisfied with the end result but there were a few trouble spots along the way that I thought would be good to write about.

The first hiccup I noticed, only after a large chunk of changes had been made, is a one page app loses a lot of “back” button functionality. Hitting the back button wouldn’t take me back a step in the page, but instead, would take me off the page completely. The cause is simple enough. My application was never actually going to another page. It instead was showing and hiding different elements on the same page, rather than changing the page entirely. This effectively kills the use of the back button to navigate.

My first instinct was the lack of back button was a deal breaker and I needed to revert back to a normal static page system. I imagined there is an event.preventDefault type fix for this but, after a few drinks, I experienced a moment of clarity and decided to instead change the user experience to invoke a different method of navigation. The key problem was navigating my projects. Let me explain this visually:

Previous Experience

The user would land on the home page. Hopefully they would click projects to see what kind of shenanigans I was programming.

The projects page would have a number of button triggered links to some internal projects and some external projects. From here, however, going to one project to another could only be done by clicking on the projects button again or by hitting the back button, the latter being my own typical navigation style.

The new experience needed to invoke a reason to prefer hit the projects button each time over hitting the back button. Here was my solution:

New Experience

The landing page stayed the same. However, now when the user clicked the projects link…

A sidebar slides out to reveal the project links. A user can now click on a link and it will render (at amazing speed due to Angular, mind you) in place of the main content of the homepage, like so:

Now, in order to see the project links, the user knows they must click the projects link again no matter what page they are presently viewing.

The expectation of the sidebar reappearing for access to the project links removes the tendency to resort to the ‘back’ button for returning to the previous state.