Nav and Angular Component Router


I’m walking through the ionic 2 tutorial and i’m noticing a few places where ionic seems to do things a little different to angular 2. The main one im seeing is the ionic navigation, i would have thought that this would have been more of an extension to the component router in angular. The ionic nav seems to be more code driven where you have to inject the controller and manually navigate where angular seems to be more route driven. Related is the rootPage having to be manually set up instead of having a default route link angular 2.

Whats the reason for this shift? My initial thought is that it would be better to extend many of the angular principles. that way if you know angular you know ionic 2.

i tested ionic 2 yesterday and have to say… it is easier than expected.

Ionic focused more on the mobile approach --> you see no routing depending on the browser location! (because it is not necessary on mobile devices).

This is necessary to avoid such hacky routing like in ionic 1, where you have the browser location and angular routing (ui.router) and an abstraction layout with $ionicHistory and so on.
But you have to care about open modals, alerts, … which are present on a page/view but influence the navigation history.

I think it is easier than in ionic 1 --> you have pop, push, present in the main cases. if you want to go back --> use pop. if you want to navigate deeper in your navstack --> use push. Is there a part that is part of the current page --> use present (Alerts, modals, …).

@mhartington the only thing i was missing is that ionics navControllers check on it’s own if i am already on that page. In most cases i do not want to reenter the page (like using a sidemenu and you are able to click multiple times on the same page).

Angular is really hard browser focused and not optimized for “real” app feeling :smiley:

That’s a really good point about nav history including models. I wonder then how angular 2’s component routing plays into device navigation then. Firstly i’m not even sure if you could have a url represent a model in angular 2 so that its added to your back history.

It would mean going from something like /Item/Details to /Modal/Purchase which breaks the component routing a bit. Maybe you could still do Item/Purchase but that route would create a modal component instead of loading a new partial view.

In saying that does that mean you can’t really use the component routing in angular 2? Mainly interested in its ability to route to different real estate areas on a page based on different parts of the url.

An example of this would be something like \Item\Details\Tab3 meaning that you would be on the Item page, with the 3rd tab selected.