Routing in Angular | How to Implement Routing in Angular | Angular 18 Tutorial In Hindi | part 7

welcome back to learning Partners so this is like seventh episode of angular tutorial so till now we have completed the directives uh component data banding and basic things we have completed now we are going to see routing so angular or react or vuejs so all the applications Frameworks like Tech these are the different technology which are single page application that is SPM Spa single page application so what do we mean by single page application as in we will have only a physical one HTML page that will be continuously rendering and in that HTML page our UI only will get changed page will be constant so what do we mean by single page application and how uh previous applications were there so let me just open the W3 School website let it load so now you can see currently we are in the bootstrap page now if I click on JavaScript just pay attention over here and over here so when I click on the JavaScript page is reloading means it another request is going to the server and it is calling the physical page of JavaScript just like that so if I click on again CSS again Ser server request will be there and again it will the it will call the physical page so this is the traditional approach how application used to before single page application but after single page application there won't be a server side request only all the HTML part will be loaded in a single uh in a single request and then we will best just create the dynamic UI okay so this is the basic like how you you should know like how applications were before and what is the single page application now now so up till now what uh again like what we are going to cover so I will explain like what is routing how what is the route object how to create route how to implement nowbar for navigation just like on click of that particular route should be activated and how do we redirect first we will see from dots how do we navigate and from HTML also these are the things which we are going to discuss now so when we create the angular project in build we have a routing Library also so we everyone knows like angular is a single page application but to achieve multiple page based navigation means from one page we can uh we are able to navigate to another another page just like w see we are able to navigate from one page to another by using this nabar so so to achieve this kind of behavior we have to use routing Library okay so we don't need to do install and every anything because by default it is available so when we create the project we get one file that is app route. TS so this is now now a constant file but in previous version we used to have this as a module app routing model. TS was there but now it is just a constant file where we can create the route so here you can see we have an array is already created now this is an array so inside this array we have to create a route object so object enter so now route object we have to create so in that route object one mandatory field is path so path is nothing but URL of your component for all the component we are going to create the routes means the component which we want to access by using routes those component route should be created so how many components we have created so let's say add employee so now add EMP this is the route name I'm giving then if in my URL we have ADD hypen EMP which component we have to render so we have to specify component now here we have to specify the component name so add employee so here you can see it is suggesting once you click on it import will be automatically added so we have to provide the class name of that component so this is my route okay so this is my route basic okay so again this is an routes array so this is one route then second route again we can create path empty then second route so let's say data binding hyph binding and on this route which component we have to open so data binding so data binding so you can see it is suggesting you just click on enter it will add the UT statement as well let's create the remaining also then we have employee list so again path colon EMP list component employee list let's create directives also again path structural D component structural directive sorry just like that we will create for attribute also so these are the components we have created till now it's not like mandatory that you should give a hypon it's your name whatever the name you think which is descriptive you can give it let's make it attribute Capital small hyphen anything you can use component will be attribute like this okay so these are the routes we have created this is nothing but route object route object consist of so many things but these are the two mandatory things if we add comma and see these are the various properties we have in the route object okay again we are going to discuss this in detail but in this video I'm just sking it to basic like uh title is there can activate data children load component Outlet so many things are there providers redirect so many things are there but in this episode we are just going to focus on the basic thing right so we have created our routes now after creating the routes next thing is as our app component is our parent component right so here instead of adding individual uh selector of the component now we will add our nowbar over so in index.html we have already added the link for the bootstrap so if you have not add that just add it over here because I have not informed like how do we install the B till then we are going to use the CDN link now in app component app component is our parent component so this this will be uh always be there in the Dom so let's use the bootstrap nowbar let's go to bootstrap M 5 let's use the nowar let's use this I'm just using this you can just copy the code also copy the nowar I'm keeping it over here okay after now bar let's add the container du and in container we need router Outlet so router Outlet is a directive which is responsible to render activated route component this is the simplest definition again I'm repeating router Outlet is a directive which is responsible to render activated route component means out of this route whatever the route is active that component will be loaded over here in this router Outlet okay now let's save and check if we are able to see the nowar so you can see nowar is visible after now bar here are the links so here we have to add the links whatever the routes we have created so let's say over here employee list now employee list so we have created this route for the employee list our route name is this so let's copy this now this will go over here so in traditional application to Navigate to navigate we used to use hre but in angular instead of hre we have to use router link is equal to double quote and slash you have to Pro it but from angular 17 all components are stand alone so whatever you use right you need to import that so you have to go to the dots just like that you can see router link is there let's remove this import statement we don't need the component import now just like router Outlet you need to import router link as well then only you can use it router link just like this let's copy paste employee list add employee then structural directive let's copy and another one is attribute attribute directory and here we just have to provide the individual route name this is ADM we'll go on ad EMP over here then employee list we have already added structural directive and attribute directory like this so let's save and check if we are able to navigate particular route so if we click on employee list see hello from admin is coming if we click on ADD employee add employee is coming if we click on structural see navigation is also getting changed and that component is getting rendered but if you see over here page is not reloading see page is constant got it why on structural attribute same component is there let's save again something is not working on attribute URL is not getting changed why is it attribute directive this will go over here okay some spelling mistake was there so now if I click on attribute you can see attribute direct to page is visible so earlier what we used to do we used to in app component we used to render particular particular component but now we have created routing we have implemented routing so we are with the help of nowar we are able to navigate from one component to another got it so this is the basic of routing so till now we have covered what is routing route object routes also we have created now na also we have created now the remaining thing is redirection so from if we have to redirect from one component to another so from HTML is very easy by using this router link you can navigate from one component to another let's Implement that so let's say from attribute here I will add a button class BN BN go to structural now what I need to do from attribute directive if I click on this button I need to navigate back to the structural directory so over here also I can use router link like this okay let's remove this but again if we have to use the router link we have to implement over here router link just like this so either you can do like this property binding or directly like this also both is possible either like this or like this and here you need to specify the route so let's get the route of structural so this is my structural route let's put it over here so let's save from attribute now we are trying to navigate to the structural so see currently we are in the attribute director if we click on over here see we are successfully navigated to the structural directory this is by using HTML from HTML now if we have to navigate froms means from any function or something so now let's copy this button now from structural we will try to navigate back to the attribute but instead of this we can navigate from a function go to attribute now on click of it we will navigate so let's write a click event navigate to attribute let's create this function so now on this button click from function we are going to navigate means from TS now from dots we have to navigate so we have to create an instance of router service okay so now here comes the extra part that is how do we create the object of injectable services so there are two ways first is like using construct constuctor so in Constructor you can write private router it will be object of router okay so this is called dependency injection like this is the injectable service so once we create the object of this class we are going to need the object of router also so this is like dependency injection it's a design pattern but don't go in deep just for now remember like this is dependence injection in coming videos we will discussing on that but just for now we need the router object that's why I'm explaining so now this. router object which we have created dot navigate by URL and we need to pass the URL and structural we are in the structural so we have to navigate back to the attribute so let's get the attribute path so this is our path and we have to paste it over here so from TS we are going to navigate so if we have to navigate from one component to another from TS we have to make use of this method and this method will come from router service so let's see now if we are able to navigate So currently we are in the structural but it is not saved button so now if we click over here see we are able to navigate so from attribute we have navigated from HTML but from structural we have navigated from function so this is what we do the navigation this is uh from Dot PS by using router service and from HTML by using router link router link you can write like this also this is like uh what we can say property binding and normally router link also you can use but if you have to use the router Link in component.ts import you need to import the router okay so this is everything what I need to explain in routing if you are new to the to my Channel please do like and subscribe that's it with the current video

Channel: LEARNING PARTNER

Views: 2,630

Keywords: angular 18, angular 18 tutorial, angular tutorials in hindi, angular tutorial, angular tutorial in hindi, angular 17, angular hindi, angular 18 new features, angular 17 tutorial, angular, angular in hindi, angular tutorial hindi, angular interview questions and answers, angular tutorial for beginners, routing, routing in angular, angular 18 routing, angular 17 routing, angular routing, create routes in angular, how to implementing routing, how to redirect in angular, SPA, routes

Id: LNihtMURAg0

Length: 15min 27sec (927 seconds)

Published: Thu Jun 06 2024