Part 4: Angular Routing | User Registration & Login Form using Angular , PrimeNG, JSON Server

in this session we are going to create the routing for login register and the homages and also we are including different services and also guards and interfaces required for this one so let's get started the previously I have displayed the hello world in the appload component. HTML the next is we are going to create the required components so in order to create a login components inside the app folder I'm going to use the angular CLA so if you want to create a new component you can use NG G4 generate C4 component and I'm going to create a login component inside the components folder so I'm giving components slash login so it will create a folder inside the app and again it will create a login folder inside the components you can see here next I'm going to create a register component so NG G4 generate C4 component and I'm going to create a components folder it's already created so it will create a new folder called register inside the components so you can see now two components okay the next component is home component the same proced procedure NG G for Generate C for component then inside the components folder it's a home so it will create another home folder with all the component and CSS files and also it is updating everything in the app. module. TS file you can see here the login component register component and home component is automatically added while we we are using uh this angular CLA for generating the components okay so our next step is we have to uh create Services file right so for that I'm going to generate service files using angular CL that is NG G for Generate s for services and you can mention the folder so I'm going to create inside the services folder I'm going to create a service is file so that is o. service.ts so just mention O then it will create a file named o. service.ts okay see service folder is created so component service folder and O service. file and the spec file is generated similar way we also uh since we are using the login form and the register form and the homepage we have to use the guards okay so I'm going to create using angular CLA so NG G for Generate G for guards and I'm going to create a folder guards and inside again I'm creating o guards okay so just giving a name O then automatically it will create the files for that so it is asking which guard you have to uh activate so uh for normally log we are using the can activate guard so I'm adding can activate sorry enter here so it will create o. guard dopc file and O guard. TS file inside the guards folder okay next is I'm going to create interfaces so we are using the typescript so in order to use a login and the component form sometimes we have to declare the structure of the object or you know uh structure of the variable or object so for that I'm going to create an interface so for that NG G for Generate I4 interface and interfaces folder I'm creating and inside that oath so if you create a Services guards or interfaces if you mention o that means it will create for example if it is interface it will create oath do TS file if it is guards it will create oath do guard. TS file it is service it will be o. service.ts file but in the component you can mention the folder then automatically it will create the component TS CSS um you know unit test cases everything so if you create interfaces SL o you can here see o. TS file will get generated with export interface O Okay so our compon component Guard Services and interfaces is created our next step is while user Enders slash login in the browser you have to navigate to the login component when you slash user Ender slash register you have to go to register and the similar way the home component as well okay so for that once all the folder structure has been created you can go to rooting module. TS file so here you can see a Roots array in that we will mention an object okay so I will tell uh if the user enter the path login then I have to navigate to the login component which we have now created okay login component so this is one object similar way you have to mention if the path is is register then you have to load register component Okay then if the path is home then you have to re load the home component and if user and also we are telling if the user types for example uh if it loads on local local host 4,200 if user is not typing login register or home after the slash to which URL we have to navigate so path if the path is empty then by default we are telling we are redirecting to the home URL and we are matching the path as a full the similar way sorry it should be in a string in the similar way you can also mention if the path is you know star star that means something else other than login register or home you should have to load the you know the no data found or no page found component so I'm not creating that it for now I'm just uh going with this parts and the components so this is done so we are telling everything uh if your user enters this path you have to load this component right then where we load this component is the next question for that you can go to app. component. HTML maybe you have a header in your application now I'm not creating any any header so I'm telling whatever the login component register component home component based on the URL user Enders I have to load all this component inside this de okay so for that you can give rotter Outlet if you're giving rotter Outlet here if user end ases login in the browser the login component will get replaced here okay if the user enter home the home component will get replaced here okay this is how the rle outlets and the components getting loaded automatically here now let's start we can check all the components and the rooting is working F fine or not okay so by default when you create a home component you can see there is a tag just simply saying homeworks the similar way login works and register work okay so I already running my application here and go to the browser and you can see if I type home the home works right so why it is automatically redirected to home initially it was like 4,200 and we are also mentioning in the rooting file we are mentioning rooting file if the path is empty redirect to home right so if nothing is endered here automatically it navigates the home URL okay then we will tell if user enters a login URL then login works that means login component is getting loaded there so if user Enders register then register components loads here so if you have any common things you know some Navar something like that it will be loaded for all the components because here only the login component home component you know all the components is getting um loaded so for example for your information I'm just showing a some Name Bar something like that see it will always it will be there see login works but this section will be always there just for your information so this is how we Lo the uh rooting okay rooting for different component

Channel: Learn from Scratch

Views: 1,251

Keywords: angular routing, angular project creation using angular cli, primeng application, angular, primeng, angular examples, angular project, angular primeng project, angular project set up, angular primeng project for beginners, angular primeng project set up, angular primeng app step by step, angular primeng app with authentication using json server, primeng app, Angular CLI Project, create components services guards interfaces using angular cli, part 4, user login & register

Id: DeiaFer0VUY

Length: 10min 40sec (640 seconds)

Published: Tue Oct 03 2023