Understanding Angular Routing in Ionic 4 Apps

[Music] hey everyone what's up is Simon back with a new video on angular routing inside ionic apps this is more of a basic type video if you're already inexperienced ionic developer there might be not a lot of new stuff in this video but for the beginners out there this video is really focusing on the new routing aspect of ionic 4 if you don't know about the old navigation that might be a plus anyway let's take a look at a few different items that we need to understand so first of all I created a blank new app you don't really have to follow our long this is more alike a bit of explaining video so once you start your application you might ask where is actually my component coming from why is there something showing on the screen to understand this we first of all take a look at our index.html file and in here we will find the body which only contains an approved or route no this should be the up route I guess so not really a lot of information but we need to know that the app component is connected to this and if we look at the app component we will see that it has the selector app root and the app component HTML so this is basically the first HTML file after the index.html that will be loaded into this place the body of our website so checking out the app component HTML this holds the ion app which is responsible for later adding the right styling for example to your application so when you run your app on iOS or build it for iOS or Android this class will also take care of applying the right styling and in here we get the ion router outlet this is basically just a little different stuff from the regular angular but so the ionic outlet contains a bit more some animation stuff as far as I know but besides that it's really a small component so this router outlet is what the angular router is actually looking for so in routing we define different routes with a path and the component or children that should be loaded once we navigate to a certain page of our website and the router takes all of this information says thank you then somehow or someone is requesting the home page and now the router is looking for the component that should be displayed so we will find if we go to the empty route in this case how redirect first of all okay so then the router takes this one which matches the home path and we will load the home page module and the router is now also at the same time looking for the router outlet in our HTML which we have discovered in this place so that means when the application is navigating to home the whole body which is an ion router outlet gets the content of whatever the angular router finds inside the route setup that we supply to it so this is really important to understand and basically everything behind the router and the magic that is happening so just imagine like iframes their router outlets in our page and the router of angular is trying to fill those outlets with different information that we set up up up front so let's take a step further and let's get away from this so if you create new pages you get new path and all of these can be simply exists at home list details are all available and could be loaded into our router outlet let's see list we go to list details we go to details so we can reach all of them no problem exactly with a path if you want to navigate to it without entering the path which you will likely do inside your real ionic application you got a lot of ways to do it actually you can do it first of all with the router link right on your ID button Aion item or whatever element I just picked the iron button here so this router link is now just like an hrf basically telling the router to do whatever needs to be done to display the list so this would be my first button which brings us to the list the second button is using the rattling in these brackets and this simply means that whatever we pass to the router link in this block is interpreted as an object so therefore we cannot simply put in a string here we have an array of components which basically make up the path we want to navigate to this is quite handy if you got like an NG 4 and then you got the ID here so then you could pass it into this array and the ID will be used in the path so of course they will also work with this somehow but it looks a bit better if you dude with the breakers and the ratholing so two options number 3 is opening it from code and therefore I created a new button and this button can now again have to or use 2 functionalities of the angular router we can navigate by a URL or we could also simply navigate again using an array of components that we pass to the router and also at the same time the same concepts apply if we want to go to you like a details page in that case you could have a detailed page right here and add something like this which means you will specify something after this slash and then on the details page you can retrieve the information that you passed so then a URL might look like details 42 oops details 42 and then you will be on the details page and you can access this ID actually I've wrote a guide recently on the ionic Academy about this topic on how to pass data there are actually a few ways to do it so one way to do it really bad is using query params make your URL basically look like this if you use big objects that you eat on the next page so don't do this please then you could use the servers and keep the information in the service or something that is possible since angular 7.2 is using navigation extras this is a bit like the old I only three way of passing data to your page so in that case you do the same like before and then pass a new object to that page which contains a state and in that state you can wrap basically all of your object and then you need to of course unwrap it on the next page but that's not really a problem so this is also a great way to pass data to your page okay that's the basic routing so you might have all of the stuff in your general writing this is pretty easy you got some general path then you might have some with dynamic information but things are not really complicated yet things only get really complicated once you start to use the tip bar or the site menu and then you suddenly have child routing files and you don't really know what's going on so that's what we're gonna do now and we're gonna step through everything for the site menu in for the tab bar in terms of the path so we will not build it you can find the information link below and also on the ionic Academy there are quick links on the tap or the site menu and combining everything of course okay so for one of the recent tutorials or courses inside the Academy I have built this application and this is very typical that you have a login page up front so in routing the first redirects your login and then we got a tutorial god that's not really relevant here plus this path also but what's relevant is that after the login we navigate to an F and this could be any page this could be a regular page this could be a menu page or in our case let's say a text page so the router is really not interested in what is going on he's just looking for something so if we just go to the path slash app the router will look through all information up here nothing matches and this one matches okay so let's dive into the temps page module which is right here and remember we're now routing to slash app okay that's the path we got after the login so we arrive on this page and now the first part which was slash app is now already resolved so imagine an array of path components and the first one is now already resolved so we end up here looking for an empty path basically and that means the first object we got here immediately strikes because we got an empty path so we tell the router to redirect to home and because we already used this information we can now continue to the next block so until here we arrived with also matching the empty path because this has the information to path match this empty path only will at full match this means if we navigate to okay this this path is valid because we really have a completely empty pet but if there's something else in here this wouldn't strike because we still get something so it's looking for the blank space but only if there's really only this Blake space okay so we've redirected to home we come to this part and then we will use the tips page first of all so imagine the router already loading the tips page into the outlet and then we will also try to load the child home which matches our home road now into the outlet now of the tips page okay so I hope this one too fast but Lamy we step back to the tips page so first of all the router takes the taps page which holds the mark up for the ionic tips and the interesting part about the ionic temper is actually I'll let me bring this in it is specified here on the ion taps component and github I is a stylus component that works as a router outlet in order to handle navigation so the a on tips basically is again a router outlet interesting right that means we can use it as a parent component right here and we can load new things into the router of lead of the ion tabs and this is exactly what happens with a temper so in our app if we lock in and go to epsilon we will see that we got a temper at the bottom and in here we got some information whatever actually I think I removed my API keys everything is gone in the application great job Simon anyhow this should still work so here we got the router outlet which uses the children for the taps page which is always present in the background or as a parent and then you can see the path yep menu and F okay I should have used my API key in here anyhow that's how the tab bar works and now the thing is the menu works basically the same so we could go back here and this could be now a menu page holding the general structure for the menu which looks like where is it right here let me just bring it in from the article so the general structure for the menu would look like this and the menu again has a router outlet that can be filled so the menu on the site holds the links and if we click on it the the ion router outlet which is the main content area will be filled with whatever information and now the cool thing is about I'm going for that this is not really complicated anymore and you can combine all of this and that's exactly what I did in this course as well so we navigate from the login to this app page which holds the general routing for a tap bar we got a home we got news we even got news details and we also as a tab got a menu which looks in the app like this so we call this profile a bit disguised and if you go there you will see that this page has a menu on the side why okay so the app is and now again or the angular router is using information from top to bottom okay it starts at app resolves to the tips page taps page uses the taps page as the general router outlet and then loads the menu into the content area and the menu is now again just like the tabs now using this mark up what we got the empty path here a parent component menu page that defines an ion router outlet and this router outlet is again filled with the children which in this case is profile so if you inspect the URL which is AB slash many slash profile we can directly go through all the steps the router is taking and these are basically go into the taps page module for app ok app is resolved looking up menu and profile going through this ok here's the menu let's go to the menu page module menu is resolved last part missing profile ok empty path profile and there we go and that's exactly the structure of the angular router and what the angular router is doing in your application you have to keep this in mind whatever you set up these are the child routes that allowed at a later point and the angular router is going from top to bottom so whatever is defined in the a protein module will be used first and then once we got a match we dive into the child routing modules also what's important is if we will have something like app up front here that loads a different page the angular router would strike immediately right here because it will always look through the area and take the first entry that matches what the router is looking for so that's very important what's also working is having the same thing in multiple places so if you maybe got app and also app / whatever these two definitions inside our routing can exist with the same tips page module okay you could even have it in more whatever places I think you understand what I mean so you can have this how often you want to have it and now I need to check back what I've written in the article as well okay yeah this is also interesting for debugging your routing simply go to the a protein and say enable tracing so if we go ahead and save this information the router will print out what I told you in the last five minutes basically I'm going through the different steps and maybe even a bit more a bit more information I guess but you see router navigation start configured and routes recognized child activation start path app so we're trying to resolve app and we're trying to resolve the empty path then we try and menu at some point profile actually I'm a pretty good angular router I guess I could do the job of the angular router but I don't talk all of this right so I hope so that's basically it about the angular router and a lot of you had problems with this in the past especially the site menu the tab bar but once you understand this hierarchy of going from top to bottom and simply following in the past that the angular router is taking it becomes a lot easier in earlier versions of ionic 4 we had tab bar stuff where we had like taps and then tap 1 whatever so here we had named router outlets they were filling a specific named routing outlet which is also possible within yourself but luckily this was removed so our URLs look now very clean again like this and the last thing I want to talk about is mobile views actually not really talk about it but just bringing up effect that is if you're using mobile pages in your application this actually doesn't affect the routing because these mobile pages are what was that no idea these modal pages are displayed above the actual components in your application I don't know if I got a modal page in here no I think I don't know I don't think so but once you open them you will see that the URL is not changing and you also don't need any apparati information for modal pages or popovers because those are special components that live outside of the angular router and simply above your components and that's it for today's lesson about the angular router in ionic EPS I hope I haven't been too fast in the main part of this tutorial I'm sorry if I was please ask any questions I know the angular router is scary and sometimes confusing for a lot of you so always we feel free to ask your questions and of course also check out the irony Academy where this great course is hosted in which we actually also build a dark mode for our application so really cool course check out the ionic academy come you can start your membership and also have 14 days trial for just $1 if you enjoyed the video give it a like below subscribe to the channel hit the bell icon and then you will receive all the great videos Tuesday code Thursday vlog style videos and then I'll catch you inside the next video so have a great day and take care [Music]

Channel: Simon Grimm

Views: 14,714

Keywords: ionic, ionic framework, cordova, angular, javascript, hybrid app, cross platform, ios, android, typescript, web development, ionic 4, ionic 4 tutorial, ionic 4 course, ionic 4 app, ionic 4 for beginners, learn ionic 4, ionic 4 angular, ionic4, angular 7, angular 7 tutorial, learn ionic, ionic for beginners, ionic tutorial, ionic angular, ionic guide, ionic course, ionic angular routing, ionic 4 routing, ionic 4 angular router, ionic 4 navigation

Id: 9v_yVGb41qU

Length: 19min 50sec (1190 seconds)

Published: Tue Jul 09 2019