Angular 10 Tutorial #40 - Router Module in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn about a router module sometimes also called as routing module sometimes also referred to as app routing module it's one of those basic things that you need to work with angular application not if you talk about any simple basic application or say a complex one you would need some or the other routing mechanism in your application router module is the one that would help you with that we'll learn all about it how to set up how to get started with it what happens when you select defaultly while installation i'll talk about that process as well for you in this episode so let's get started this is part 40 of the angular 10 complete tutorial playlist i have planned around 100 tutorials in this particular series we have reached around 40 now so mid nearing around midway and soon we will start the live project in next couple of episodes so very excited about that all the notes that i write in all of these tutorials is uploaded to github link the link is in the description box below make sure you check it out so these are the topics that i've covered so far in detail along with notes explanation and code samples so make sure that you go through each of these if you really want to learn and master angular 10. also if you have any doubts during any of these tutorials or videos please do let me know in the comments section i'll be more than happy to help you all right so we have covered so far all of these topics today we are talking about router module all right a router module also called as a routing module also called as app routing module all of these refer to the same base module which works with your main app module right so like i told you um every module write can have its own routing file right so the one that comes with default for app module is called app routing module a routing module is a placeholder where you will configure all the routes navigations for a particular module right in this episode i am going to show you for app module but the same can be applied to any other module and we will learn that in detail when we come to lazy loading but today we are talking about app module and the routing for app module now it's one of the best practices to have routes configured in one place right so you don't go all over the place to search where the routes are you maintain a single source of to truth for all your routes for that particular module that helps you in configuring editing or updating it makes it easy to maintain and debug right since they are all in one place it's easy to understand and it's easy to maintain debug upgrade all right so how do we generate it so we can generate a basic app routing module using this command which is ng generate module app hyphen routing flat hyphen hyphen module equal to app right so now this when you do that you are telling that you are generating a new module and its name is app hyphen routing it's flat that means it will not have any hierarchy and you are telling it's for app module right that is what this command means now let me show you that um but before that let me make some notes for you so you can understand easily and reference it later call it routing module or some people call it app module or router module right so what is it um it's a single module and placeholder where all our routes are configured for that particular module all right so now each module can have its own routes okay each module can it have its own routes now remember that whenever we install angular application if you remember it would give an option which says do you want to include routes you want to set up routing in your application right so when uh so we can say during the angular app installation we get an option we get an option which says do you want to to have routing in your application right so it would give you this option when you select it will automatically create the app routing module file for us right that is what you see here you see here app hyphen routing dot module.ts file now this is the file which gets created when we select by default and say create a routing module for this particular angular application so whenever we select that option this file is created and by default it will have empty routes array right it will have a by default empty routes so what i am going to do is delete this file why because i am going to show you from scratch how it is done right so i just deleted it so you need to remove it from the app module also and from here you remove the instance of it so see now this is as good as an application which does not have app routing right so now our application does not have app routing so now let's say you are working on an application which does not have routing or you want to install app routing how do you go about it right so that's what i'm going to teach you end to end so first you will have to run the command ng generate module and what is the module name it's usually app routing if you want to have it on the app level but again you can have it any name there is no restriction that it has to be app routing by default that's what angular recommends and angular creates it for us we can have any name now you're saying flat right and you're saying app equal to oh you are saying module equal to app so that means you are telling which module it will work with right so these are the commands this is the command that you would run in order to get a routing in your application right so for example if you have not selected a routing during creation of the angular application you can run this command now with me or if you already have just delete that file like how i did and try it again the reason i encourage this is to try it hands-on so you know how it is done practically first hand so now you would see it has created a file called wrap routing dot module.ts and it has updated our appmodule.ts now let's open that app routing this is the default one that comes okay so it does not have anything see it's just blank it does not have anything right it has just ng module and it has common module right so this is as good as a module right now we can have it out of the router module so for that we'll have to do few things to customize this right so what are those let me show you that all right so these are the steps we need to do now first we need to import routes and router module from angular router okay so these are the two things that we need to import first step is import routes and router module let's do that parallelly along with me so that way you will understand and if you don't know exactly so what i prefer is i do something like this right and now when you start typing here it gives you kind of an auto completion right so you got routes right so we got the routes we got the router module imported from the angular module angular router now included in the imports because that's how we use it and then what we do the next step is to create a const routes and it will be an instance right so something like this so you can create an instance of it so what we are going to do is we are going to say is right and then we are going to say that's a empty array right so here we are declaring a variable by the name routes which is of type routes that's what we are saying and we are saying it's a empty initially right it's an array which is empty right so now we are going to populate the routes right so let's say we'll bring back all the ones that were we created earlier so what i'm going to do is i'm going to import dot slash i'm going to say add loan slash add loan component and here i'm going to say add loans component right and in here i'm going to create a new path and here i'm going to say whenever path is this then component mapping the component that you should map is this and here i'm going to say add flash alone right so here what i'm saying is um i'm creating a new route uh by the name um what is it um add loan and here it should be component right and i've added that it's a component add loans component perfect so far okay and all right and in the exports we will export outer module and it should be an array yes it's an array so okay and we are saying whenever there is the path add loan the component that should point to is add loans component right so this is how you can create from scratch but if you are following along uh the angular new angular 11 or 10 you would see that this uh routing file is already created for you right so no worries on that um so even if you have it learn it how to do it that's what i would recommend let's start this application now and say ng serve all right so that's where you have it so you are now serving the application we are inside the project let's start so now whenever we do add loan it should go to add loans component that's what we are trying to achieve using the router module right so this is how you create a router module for each any module that you want to use all right so let's give it a couple of seconds in the meanwhile do hit the like button if you are liking the channel please don't forget to subscribe to my channel all right so now our application is compiled this is the application i'm going to soon start with you uh so make sure that you do subscribe to my channel all right so add loan and it is not showing the desired output so let's see what the error is um children outlets no provider for children outlets context so that might be because of our angular html [Music] so i'm going to use the default outlet and reload this still not so let's see okay let's see why uh angular path and then component just let's check one quick minute it should be right away um all right angular so we got the route and we got the path we got the component i think there is some thing we have got it wrong here because the syntax you see it's not correct somewhere it's broken so let's see what's what is it that broken let me quickly query that path is correct in the constant it's route equal to this and okay so so far it's correct and we have imported all the required ones imported okay so what we are going to do is we are going to imports and oh yeah i think we need to provide it here and say for root which means make it available for all right so we did not mention that for what okay so now i'm saying router module dot for root that means it has to be throughout the application and now i see add loan work so that was the missing piece so all right okay so that that's about setting up the router module from scratch adding some you know path to it but if you don't have any complex ones usually you should write it in a single one like this and then if you have more than one just copy and say here i'm going to say loan types and this i'm going to cancel it here and i'm going to say loan types component right and go here and say loan types and loan types works right so yeah so that's that's was the one for app module right so this is the one that we have given for app mode module right but if you are creating a new modules you can have any number of modules which can internally have their own routing mechanism that's what i'll be covering once we come down to lazy loading and creating modules with its own routes uh we'll come to that later but today's episode is brushing up the fundamentals right and getting the foundation strong so i hope it's clear to you uh now i hope that you would be able to create uh the app routing for your angular applications without any issues again if you have any doubts uh please do let me know in the in the comments section below i'll be more than happy to help you in the next episode i'll talk about the component routes options right so like i just showed you that this is a pretty basic uh setup right where you have a path and a component right but usually uh the use cases would be much much more complicated and there are a lot of options and configurations that this can take so i'm going to cover that in the next episode so make sure that you join in me there as well i look forward to seeing you in the next episode till then you take care stay safe also if you like my work and my tutorials please do consider buying me a coffee at buy me a coffee dot com slash arc tutorials thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 5,668

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular 2021 full course, Angular Router Module

Id: 07_0GkRAs24

Length: 15min 58sec (958 seconds)

Published: Thu Dec 10 2020