IONIC Section 7 - 7.2 How does Routing work in an Ionic + Angular app ?

Click here for more videos available on our youtube channel !

Hello everyone, it's really important that you understand how the behind the scenes navigation works. In an Ionic + Angular app, we use the Angular router for navigation and this is what we saw in the previous video and also in the module dedicated to this. We configure our routes in our Angular router configuration like in an Angular application. We can then use the link or the navigation method when we inject the router to switch between the different paths and therefore the different pages. we will attack the interesting part when using the router in an Ionic application, because this Ionic application with the "@angular/ionic" package encapsulates sort of this Angular routing feature and you can tell it does it using the output router if you remember. This is the case for adding all these pretty transitions and for this Ionic considers the navigation or the different pages as a page stack. Because if you think of a mobile app, you usually see one page at a time and you can go to a new page or press press the "previous" button to go back. So you can basically do the same thing in the browser of course. You can so see the navigation as a stack of pages and you're always viewing the page that's above that stack. When you go back, you basically display the top page and the other pages. Ionic controls these page stacks with a stack controller called “stackController”. It's a class you don't work with directly in your Angular application, Ionic does it for you, so it's internal to Ionic. When you move forward, a new page is inserted into this stack and when you use the "Previous" button to go back, the page the highest is displayed. Now, in case you were wondering how it knows if a navigation call is meant to go forward or backward, it basically looks at the internal ID of your navigation action and it turns out that this ID helps you determine if the new route is basically a step up from the old road or behind it so to speak. So you don't have to worry about that, Ionic is very intelligent to know if you are moving forward or backward, which is important for playing the right animation for the transition of pages. Now this page stack is also cached for you and that's a difference from a regular Angular web project in the experience of the browser. What happens is that if you go to a new page and go back, all those pages that are ultimately just components are essentially destroyed when you leave them, no matter if you move forward or backward. Now, with Ionic, that's actually not the case. When you switch to a new page, that old page, which is still in that page stack, is kept in a page in memory. So all that stack of pages is effectively cached what you can say and when you delete a page then it's deleted from the cache because it is removed from the stack. This will become important and also explain the little bug you may have had if you recall, when the page does not display the recipe image and details. Besides the Angular router for navigation in which we will mainly use and which is the main recommended tool to navigate your Ionic Angular application, we also have the navigation controller Ionic called “NavController”. It is an injectable service that you can inject into any component or service that you may have and that basically gives you utility methods that also interact with this boot controller. For example, it will give you a "pop" method which allows you to toggle the last page of the page stack and will therefore trigger a navigation behind it. We won't use the controller too much. navigation but I will show it to you anyway because it is good to know that it exists. It can help you to go back but we will mainly use the Angular router. This video is coming to an end, I'll give you an appointment for the next one.