#81 Implementing Routing in Angular | Angular Router & Route Guards | A Complete Angular Course

[Music] hello and welcome to another section of this complete angular course in this section you will learn all about routing in angular and in this lecture let's start by understanding what is routing and how to implement routing in angular routing allows us to navigate from one part of our application to another part and in terms of angular we can say that routing allows us to move from view of one component to the view of another component and in angular in order to implement routing we use a module called angular / router so it is this module using which we Implement routing in angular here I have created a new project called angular routing and in this project let me first go to package.json file and there if I scroll down to this dependency section you will see that in that dependency section we have one module called angular / router so when we create a new angular project using angular CLI at that time only this module gets downloaded all right let me close this file and let me go ahead and let me expand this Source folder and inside this Source folder let's also expand this app folder and here we have our app component if I go to app component. HTML there you will notice that I I'm using two selectors the selector of header component and the selector of footer component so here we have our header component and here we have our footer component so I'm using the selector of header and footer component here in the app component and this app component is our root component which is being used in index.html file so we already know this from our previous lectures so when this application will run the content of app component will be rendered in the app component we are using the selector of header component and footer component So currently the view of header component and the view of footer component will be rendered in the web page if I go to the web page there you will notice that here we have one header and we have one footer so the view of header and footer component has been rendered here now in the header you will also see we have some links like home about contact and courses apart from these four links we also have login and log out link and these five links but these links we are not interested right now currently we are interested in home about contact and courses link because these are the four main pages of our angular application so if I go to header component. HTML for that let's expand this header folder and there let's go to header component. HTML there you will notice that I'm defining those fold links using this anchor tag now what I want is when this home link is clicked in the web page in between header and footer component I want to display the view of Home component so I have already created the home component as well in the same way if the user clicks on this about link I want to display the view of about component in between the header and footer component then if the user clicks on this contact link I want to display the view of contact Link in the web page and when the user clicks on this courses link I want to display the view of courses component in the web page so I want to display the view of these components in between the header and footer component for that we are going to make use of routing now we can create and use routing in our angular application in three simple steps in the first step we need to create new route using routes array and Define some route objects inside inside that array we can Define our routes in a separate typescript file or we can also Define it directly in the app module for now let's go ahead and let's define our routes in the app module and later we will move it to a different file so in the app module before this NG module directive I'll go ahead and I will Define our routes now in order to Define routes first we need to create a variable and I'm going to call this variable maybe routes you can name this anything but the type of this variable should be routes so this routes here we need to import it from angular / router and let's move this import statement at the top okay so this routes it should be of type routes and this routes is nothing but it is an array and it is an array of Route objects and using a route object we Define our route let's see how we can do that so as we learned this routes it is going to be an array so let's assign an array to it and inside this array we can Define our routes using route object and in order to use route object we can use a set of curly braces like this so basically we can use the object literal syntax and inside that we need to specify two properties the first property is going to be the Path property so here we need to specify the path of the route for example let's say the path is home now this path simply means that the URL will be root URL /home so path home means root URL slome if I go to our application the root URL is Local Host colon 4200 so this is our Ro root URL after that when I say/ home then here the URL is root URL /home but the path will be simply home if I say about in that case the URL will be root URL /ab but the path will be about in the same way if I say contact in that case URL is Local Host colon 4200 contact but the path is contact so let's go back to vs code so here the path is home and when the user types this path home that means root URL /home in the address bar we want to display the view of Home component in the web page for that we can use another property called component and to this we can assign the component whose view template we want to render when this path is typed in the URL in this case we want to render The View template of Home component so in this way we have defined our first route this route is for this path in the same way let's also Define a route for the about path so the path will be about and when the user types root URL / about in the web page in the address bar we want to display the view template of about component okay in the same way let's also Define path for contact and courses okay so when the path is contact in that case we want to render The View template of contact component and when the path is Coes we want to render The View template of courses component so in this way we have defined four routes for our angular application and for now let's only keep these four routes and later we will Define more routes for this angular application now here we have created some routes using this routes array and we are storing those routes inside this routes variable but angular does not know about these routes yet for that we need to register this routes and in order to register this routes what we need to do is if I scroll down in the Imports array we need to import router module and again in order to use this router module we need to import it from angular / router so here let's go ahead and let's import this router module and then on this router module after we have imported it we need to call for root method so here you will see that we have two methods for child and for root here we are going to use for root method this for root method simply tells that the route which we are going to pass to this for root method it is defined for the entire application and to this for rout method we need to pass our route and we are storing our routes inside the routes variable so we need to assign that routes variable here okay so whatever routes we are storing inside this routes variable that should be applicable for the entire application and that's why we are using this for root method if we use for child method using that we can Define routes for the feature modules but here we want to Define routes for the whole application so that's why we are using this for r but if we want to Define routes only for some feature modules in that case we can use for child method and we will talk about that later in this course for now let's stick with for root method all right so here we have created our routes we have registered our routes so now our angular application is aware about these routes these four routes so now we can go ahead and we can use these routes now the only thing which is missing here is we also need need to tell angular when one of these routes is typed for example when the user typed root URL /home in the address bar in that case the path will be home so in that case we want to render the view of Home component but where do we want to render that view that also we need to tell angular and in this case we want to render the view in the app component so let's go to app component. HTML and there we want to render the view in between the header component and the footer component so for that what we can do is we can use a directive called router Outlet this directive it simply tells angular that it has to render the view at this place for example when the user types root URL / about in the address bar in that case the path will be about and for this path we want to render The View template of about component so that view will be rendered in place of this router outlet and we are using this router Outlet in between app header and app footer so that view will be rendered in between the view of header component and the footer component now in order to use this router Outlet directive we do not have to explicitly import it because this router Outlet directive it will be imported when we import this router module in the Imports Sur so with that this router Outlet directive will also get imported so we do not have to import it explicitly with this if you save the changes and if you go to the web page you will notice that currently the URL is root URL and for the root URL we have not defined any route so for that only the header and the footer is being rendered but as soon as I say root URL slome the path will be home and for this path we want to render The View template of Home component so when I press enter here you will notice that in between the header and footer The View template of Home component has been rendered so this is the view for home component when I type root URL /ab in that case the view template of about component should be rendered so you can see this is the view for about component when I say root URL / contact then the view of contact component should be rendered in between the header and the footer so this is the contact page and finally when I say root URL / coures and when I press enter the view of courses component has been rendered so our routing is working as expected the only thing which is missing here is if I only type root URL like this you will see that nothing is being rendered in between the header component and the footer component but let's say when the user types the root URL in that case also we want to display the homepage to the user we want to display the view of Home component to the user for that let's go ahead and let's create a new route so let's go to app module. TS and here let's go and let's create a new route let me copy this line I'll paste it here and for the root URL the path is going to be empty string okay for the root URL the path is empty string and when the user types root URL again we want to render the view of Home component so now if I go back to the web page you will see that the view of Home component has been rendered here for this root URL okay but if I type root URL /home in that case also the view of Home component should be rendered and if I say root URL /ab in that case also the view of about component should be rendered okay so this is working as expected if I only type root URL in that case the view of Home component has been rendered so this route is also working now currently if you notice when we type root URL we are still in the root URL and the view of Home component has been rendered but but what we can also do is when the user types root URL we can redirect the user to the homepage so instead of rendering the view of Home component here we can directly redirect the user to homepage that is also possible let me actually show you how to do that for that let me comment this line here for that we can create another route in that route again we need to specify the path and the path for the root URL is going to be empty string but then instead of us using component property we can use redirect to property and here we can specify the path to which we want to redirect the user in this case when the user types root URL in the address bar we want to redirect the user to the homepage for that the path is home and then we also need to use another property which is path match and here I'm going to use full so we have two options we can either use full or prefix I'm going to use full here this path match property it simply tells angular how to match the path against the configured URL okay let's save the changes let's go to the web page and now you will notice that when I type root URL and when I press enter it is redirecting us to homepage okay I'm typing root URL and I press enter it is redirecting us to homepage so here redirection is happening and when we are being redirected to homepage the view of home homepage will be displayed so this is another way in which you can configure your root URL but I don't want to use this approach so I'll comment this one I'll keep it for your reference and I will uncomment the above one here what I want is when the user types root URL in the address bar in that case I want to render the view of Home component so now if I go to the web page and if I simply say root URL you see there is no no redirection and the view of Home component has been rendered here so in order to Define routes first we created a new route using routes array and inside that array we defined some route objects then what we did is we registered those routes using router module. for root method and to this for root method we passed the name of the route and finally in order to tell angular where to render the view we used this router Outlet directive

Channel: procademy

Views: 11,438

Keywords: routing, router, router guards, angular, angulartutorial, complete angular course

Id: N5DWQGebIlA

Length: 17min 11sec (1031 seconds)

Published: Thu Nov 23 2023