Making Ionic routing act a bit more like a web router


#1

I get that I’m fighting the framework here, but I’ve found some really weird behaviors in the default setup and would like some advice.

I want all my routes to be more or less path-independent. If you visit /things/1 you should see ThingDetail for { id: 1 }. If you visit /things/1/edit, you get ThingEdit. If you visit /home or maybe / you get HomePage.

The problem I have is that there’s weirdness with navController.push() vs setRoot(). Notably, sometimes the back-arrow doesn’t show up correctly in the top menubar. I think this is further complicated by the fact that the ThingDetail page doesn’t quite have enough room for everything on smaller phones, so the piece of the view that would expose the “edit this thing” button is actually in a Modal, and Modals stick themselves into the nav stack.

So: sometimes when a user is editing a Thing, their nav stack looks like ThingEdit / ThingDetailExtraPopup / ThingDetail / Home. And sometimes it just looks like ThingEdit (if they followed a deep link straight to /things/:id/edit. When they’re on that page and they hit publish, I want to return back to ThingDetail. I can’t reliably pop off of ThingEdit (because sometimes that drops them back into a state with the extra info popup showing, which isn’t desired, and sometimes they’re actually at the root of the navstack). Instead, it seems like what I actually need to do is unwind the navstack (popall) and then push? Or maybe do a setroot?

The key thing here is that

  1. there’s a 1:1 mapping between URL and application state.
  2. application substate (/edit) only makes sense in terms of its superstate (if you’re on an edit page, you’re on /thing/:id/edit page).
  3. the URL in the navbar should always update when the application state / substate changes (it doesn’t all the time - I can click on the “go home” button, which calls navController.setRoot(‘HomePage’) and it will display the HomePage contents, but the URL remains whatever it was before I clicked “go home”.

I’m pretty sure I want this router to behave like the angular one (I’m porting an older ui-router based ng1 app, and that’s the behaviors my clients want). Are there any easy-to-miss configuration errors I might have overlooked?

PS: doing it all via eager-loading and defining segment mapping in the IonicModule.forRoot call in app.module, because lazy loading is something I’ll put off until I get everything else working; I don’t want to worry about this extra complexity.