3

I don't know if this style of routing/navigation has a name, but play.spotify.com is a good example. In short, at every navigation decision, the website loads a new view without deleting the old ones. This allows for pleasing "visual breadcrumbs" that enhance a feeling of continuity in single-page applications.

Critical features:

  • The URL reflects only the current state, so a reload (or link share) erases this history.
  • The history length is (seemingly) arbitrary--this is not hierarchical tree-like navigation but a rather a path on a graph.

play.spotify.com

My questions are

  • Is there a routing scheme (via ui-router or something else) that would make this possible in Angular?
  • Does this have a name?

The only way to implement this I can see is to programmitically add states in ui-router as in "Angular - UI Router - programmatically add states," but it just seems very hacky.

Community
  • 1
  • 1
JosephSlote
  • 316
  • 2
  • 10

1 Answers1

0

I'm not sure if this has a name, if it has I've never come across it. The behavior in the video above can be achieved by using a layout that contains the side bars that are not changing when the route changes.

The parts that are changing are all in the center so a widget based approach with headers, footers and side bars sitting on a main page. Then with the <div ui-view></div> located in the middle of the main page only this content will change when you select a new route

I hope this helps

Graham Whelan
  • 76
  • 4
  • Hi Graham, thanks for your answer. I understand that the sidebars should not be part of the changing views. However, it's not clear to me how to implement the functionality that *saves* the past views. Notice in the second half of the GIF, I am able to click through my navigation history without performing any AJAX calls. – JosephSlote Aug 27 '15 at 16:10