Angular 10 Tutorial #38 - Routing Strategy in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to our tutorials this is angular 10 full tutorial series for absolute beginners today's episode we are going to talk about the different types of routing strategies that are available to build our angular application why are they useful what are the default ones what considerations you should do before beginning or rather i would say designing architecting your application we'll learn how to customize the default uh routing strategy we'll also learn how to customize that option and how to change it let's get started this is part 38 of the angular 10 complete tutorial playlist i have planned around 100 tutorials in this particular series including a live project the notes that i make in every episode along with the code it's updated to github link so make sure you check it out which is in the description box below also in previously i've covered all these topics that you see on your screen right now which in are covered in detail along with notes make sure you check it out so that you can learn and master angular 10 with me if you have any doubt on any of these topics that have covered please make sure you drop your comments i'll be happy to help you so far we have covered 37 episodes today is the 38th episode today we'll talk about routing strategy so what is routing strategy right so before we start any application right we need to kind of have a idea about how our urls will look how the data will pass how will their rendering look like and they are important in terms because that will also design how data is communicated right let me give you some example with starting with some notes because this absolutely is critical before you build any application not so let's get started today is episode number 38. today we are talking about routing strategy right number one uh what is routing strategy it's the routing behavior of your of the applications urls right how they will look and how they will be look like how they will behave right so angular provides two types of routing strategies right two types of routing strategies the first one is called path location strategy right it's called path location strategy the second is called hash location strategy right they are absolutely important to understand each one how it would look so what i am going to do let me first make some notes right under them so you can differentiate clearly between both so what is path location that's the default routing strategy for angular apps right it's the default html5 push state url behavior right so how does the urls look like examples let me show you so so examples will look like let us say you have a website which is my application so myapp.com slash now let's say you will say dashboard then you would say http myapp.com user slash 10 right so what you're doing here is you're passing a value id of the user to retrieve right the you can also do some more deep linking and you can say http myapp.com user slash 10 slash photos you can have something like http myapp.com search question mark query equal to abc and state equal to karnataka and city equal to right so you see this is how your urls will look like when you are using path location strategy now i will write the same urls in hash location using hash location strategy so how will it look like so you will have a hash sign here okay see this so you will have hash so what's the difference these are called url segments right url segments uh some places you may also see them as url patterns right basically this is an single file which this is the url segment or the url pattern after the hash right so urls will have hash in the urls right both look similar similar right and familiar to only difference being that how the hash is rendered right so now a lot of times people will ask me why do we need to right why do we need two different types of routing right why can't we just have one right uh i'll cover this question in just a bit but before that i will show you the application and i will show you the behavior of both of these and how to change them and then we will come back to this question right so what i am going to do i am going to remove this here and third i will say hands-on example examples for path location strategy first then we will do hands on examples for hash location strategy okay then we will come back to this question of why we need two different varieties and which one you should use when okay let's get started with hands-on examples so like i said this is the default behavior right of angular applications default behavior of angular apps so whatever you see so i started the application now i'll go to my so here if you see we are doing slash loans see it is slash loans which means this is simple path right if you do slash ad you don't have any because we have loan slash ad so you see these are just normal looking urls which is what is called as path location strategy okay so there is nothing diff different than what you have seen so far right so if you don't want to change anything you don't want to update that's totally fine it will still work right now let's look into hash location then you will be able to better understand the comparison right so what you will do you will go to the app module.ts right we need to import hash location strategy from angular slash core right add it to providers array okay let's do that right now so you see the providers is empty so what i'm going to do here is i'm going to import location strategy that's what we have to import that has both the location the path location and the hash location so i imported location strategy go to providers and here it's an array object right so the best way to write is like this okay so here you will write provide what location strategy then you will say use class hash location strategy okay so we imported hash location and location strategy and in the providers we are saying provide location strategy use class hash location strategy so now all our right once we have done it angular will start loading our urls using hash right so let's see that in action so now you see it is already showing hash now let you will say loans now loan works right now similarly you'll say slash add now they look similar right i mean obviously a lot of you are confused as to why we read hash right so now i will address that question for you so i hope you understand both now path location and hat uh hash location so path location and hash are two different routing strategies that are available with details right so now let me come to the important question as to why do we need two routing strategies right so sometimes if you see angular is a single page application right single page app right so now what it means is that basically you just have one file right index.html and that is what will be processed using router outlet and matching routes using routing module now what happens if you are when you are deploying to some cloud vendors like aws gcp exure right so what happens these vendors or any any hosting provider i would say any hosting provider like say bluehost site ground etcetera etcetera digital ocean right so it can be anything that you can think of uh all or most of them would behave similarly okay what happens is uh they will treat something like folder like physical folders like for example when you put something like loan slash ad they would think this is a folder right but for us it is a route right this is not equal to folder right it's a file it's a basically route right it's a route so what we need to do we need to make them understand that it's a route so what happens when you put hash in front of it they will know that there is only one file which is index.html hash slash slash loan slash add so that way they will be able to render that properly right so this is why we need sometimes hash urls sometimes you can put that to error 404 and still work with index.html and say routing should be slash loans slash ad without hash right so these are different implementations especially when you want to have it the data being communicated right see again this is all um how your application should look like and how it will behave at the end of then which one should you use right now there is no difference okay really there is no um there is no um difference in a way that will be that will affect your um application right so if somebody tells you this is better than other it's not the case you can use both i have seen uh really it doesn't matter i've seen really really large enterprise applications using both hash and without a part and hash strategies and there is really no difference right like i said uh while deployments um you will see some uh issues in terms of how they are allowing the hash to be there sometimes it will recognize slash loans url as a file or a folder rather than a route right so those are the deployment issues i have seen with respect to routing but other than that there is no difference so i would say i always encourage right not only me i've seen lot of applications they encourage you to use simple path location strategy that's simple straightforward that's how we have known web applications to be they are called clean urls right because they are more readable they are simple and they are bookmarkable right simple and bookmarkable easy to remember right um so your users if they have to remember something they easy to remember right so these are various reasons why i would prefer and encourage path location but again hash location you just have to add a hash in front of it there is not much of a difference all right that being said so that covers our routing strategy this is all the nodes which i just created there i wrote again but this is for your reference so import location strategy from angular then add it to the providers list you have two types path and hash by default angular makes use of path location with hash location you will see the hash in the url like i said default html5 push state strategy various examples i showed you similarly with hash you will have url segments this is what it looks like right it's similar right only hash is getting added all righty that's about it for today's um session but in the if you like my work and tutorials please do consider buying me a coffee at buy me a coffee.com slash our tutorials in the next episode we will talk about and learn about base hraf why is it important why is it critical that you have it and other things related to it so join me in the next episode we'll learn about base href thank you so much for joining this is our tutorials

Channel: ARC Tutorials

Views: 6,856

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 tutorials, angular full tutorial series, angular 2021 full course, Angular Routing Strategy

Id: c-WqaWqDLms

Length: 14min 12sec (852 seconds)

Published: Mon Nov 30 2020