Angular Routing | LazyLoading | AuthGuard | multiple router-outlet | all in one video

  Рет қаралды 189,140

Technical Babaji

Technical Babaji

3 жыл бұрын

In this video you will learn all about angular routing so that you can start building your dream project soon.
Source code Link: github.com/Tariqu/routing
=============================================
For any Business/Freelancing enquiry contact us
Gmail :- tarique.rkl@gmail.com
WhatsApp :- +917978073704
=============================================
ng-bootstrap link : ng-bootstrap.github.io/#/home
Angular-FortAwesome Link : github.com/FortAwesome/angula...
Generate an application with routing enabled
ng new angular-routing --routing
The following command uses the Angular CLI to generate a basic Angular application with an application routing module, called AppRoutingModule, which is an NgModule where you can configure your routes. The application name in the following example is angular-routing.
Add components for routing
ng generate component login
To use the Angular router, an application needs to have at least two components so that it can navigate from one to the other. To create a component using the CLI, enter the following at the command line where login is the name of your component
Repeat this step for a second component but give it a different name. Here, the new name is forgot-password.
ng generate component forgot-password
again for not-found
ng generate component not-found
Defining a basic route
we first define all the basic route using routerLink for login, forgot-password,
then
Setting up wildcard routes
{ path: '**', component: }
if user type or try to go to a path which is not present in the application then we will redirect the user to page-not found component
Lazy loading
You can configure your routes to lazy load modules, which means that Angular only loads modules as needed, rather than loading all modules when the application launches. Additionally, you can preload parts of your application in the background to improve the user experience.
Preventing unauthorized access
Use route guards to prevent users from navigating to parts of an application without authorization. The following route guards are available in Angular:
---- CanActivate
```
export class YourGuard implements CanActivate {
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
// your logic goes here
}
}
```
watch this video till the very end manything you will learn about a real world project

Пікірлер: 176
@gandamraviteja7019
@gandamraviteja7019 Ай бұрын
Thank you so much for ur work just with 30 mins you cleared several problems in my mind and you made my work more n more simpler thanks is really very tiny for ur work
@pavanbhat5573
@pavanbhat5573 2 жыл бұрын
Amazing video. Though this was a 30 minutes video, the content covered was actually much! Angular is awesome and please create more projects as this one. Thank you so much
@vinaymahadevan2161
@vinaymahadevan2161 2 жыл бұрын
Thanks. You saved 3 days of web searching with simple very clear video.
@techmagictarun
@techmagictarun 26 күн бұрын
I think this is the best video for Learning Routing, Guard, Common Component, Form, Featuring Routing all main topics covered in single video 0f 30 minutes
@saoudiwalid
@saoudiwalid 2 жыл бұрын
The best video out there addressing Angular routing, 30 mins full of information, Great Job Tarik and Keep it Up
@prodbyovie6481
@prodbyovie6481 Жыл бұрын
Best Angular tutorial i have watched so far...Love it!!
@joaocorreiafreitas712
@joaocorreiafreitas712 3 жыл бұрын
@TB thanks for this great Vídeo..short but provide very clear logic in routing management. Cheers
@user-sr4nk3fk7p
@user-sr4nk3fk7p 2 ай бұрын
In half an hour u have done a smart work bro... Thanks a lot
@hackerhunter6212
@hackerhunter6212 2 жыл бұрын
Yes, you are talented. there are lot more theories in this video about angular we cannot found in months
@rakhipramanik2439
@rakhipramanik2439 2 жыл бұрын
I would like to tell all the beginners, you have to follow this it's really Amazing you have to watch this till end.
@TechnicalBabaji1
@TechnicalBabaji1 2 жыл бұрын
Thank you so much 😊 I really appreciate
@uditbalyan
@uditbalyan 2 жыл бұрын
Yeah. Its the most appropriate tutorial in proper quick time. 👏👏
@imyuvraj29
@imyuvraj29 2 жыл бұрын
Awesome... Most recomended video guys. This is one of the best Angular router videos till now. I had lots of doubts about routing before but after this video, I have to say you won my heart. Thank you so much for this video. I really appreciate the efforts.. A Big Like from my side and subscribe button hit. I hope we will get such videos in the future.
@DebasmitSamal294
@DebasmitSamal294 2 жыл бұрын
Excellent... awesome. Very nice video which covers great thing for Angular developers. You made my day brother.
@namanjain2449
@namanjain2449 3 жыл бұрын
Hi Tarique, Very usefull and informative tutorial. Thank you🙏
@KhushiParihar_Youtube_Channel
@KhushiParihar_Youtube_Channel 2 жыл бұрын
Very helpful for Begginers . Great Quick start.
@vaibhavtripathi200
@vaibhavtripathi200 2 жыл бұрын
You are one of the finest content creator. Great work...
@suryaguthula6531
@suryaguthula6531 2 жыл бұрын
Excellent simple sharp and clear ThanksBro for your efforts.
@joeyvico
@joeyvico Жыл бұрын
A fantastic video! Thank you for your efforts
@ehrazahmed8190
@ehrazahmed8190 Жыл бұрын
This cleared all my concepts for routing using angular
@raghibhussain1375
@raghibhussain1375 Жыл бұрын
this one is awesome, in very less time, described whole routing
@sandeepsethy8943
@sandeepsethy8943 Жыл бұрын
Very informative and on point. keep up the good work brother.
@Amit-jb5xt
@Amit-jb5xt 2 жыл бұрын
Thank you sir after this I've created user role and given path Sored role in session And role based routing I've done
@QuotesAibyYatin
@QuotesAibyYatin Жыл бұрын
one of the best video for beginners !! thank you soo much bro
@user-ky1yj7gy7u
@user-ky1yj7gy7u 6 ай бұрын
very good video with simple explanation
@rizwanshah6634
@rizwanshah6634 2 жыл бұрын
great work brother, easy to understand keep it up
@ninjatechstudio
@ninjatechstudio 2 жыл бұрын
I need this video. Awesome Explained 👍
@atifsaeedkhan9207
@atifsaeedkhan9207 Жыл бұрын
Excellent nd to the point with details. Thanks.
@ManishSharma-jz2hw
@ManishSharma-jz2hw 2 жыл бұрын
Awesome.. Appreciate your efforts.
@jayantiroy1476
@jayantiroy1476 2 жыл бұрын
Thanks a lot, Bahut kuch samaj meh aaya .
@maheshmhamane893
@maheshmhamane893 2 жыл бұрын
great tutorial every thing is here in simple way
@neethuananthu5477
@neethuananthu5477 2 жыл бұрын
Very Informative video, thank you
@priyankabhasakhetre3099
@priyankabhasakhetre3099 2 жыл бұрын
Very well explained it's very useful 😀
@ramanbhardwaj6855
@ramanbhardwaj6855 2 жыл бұрын
thank you sir it help me a lot understanding the basic root and structure of an angular application
@Hacon30
@Hacon30 2 жыл бұрын
Beautiful tutorial boss!!! Well done!!!
@enamulhaque1338
@enamulhaque1338 Жыл бұрын
Awesome... You have cleared all concepts
@charvisarang4803
@charvisarang4803 Жыл бұрын
This video is amazing to learn, thank u so much sir
@hariharan8986
@hariharan8986 2 жыл бұрын
Very easy to understand. Awesome work man!! can you please create a video for state management using ngrx
@uttamnandi124
@uttamnandi124 2 жыл бұрын
Thanks for such an excellent tutorial.
@iamzb3006
@iamzb3006 2 жыл бұрын
Thank you brother, for your efforts.
@saumyaneekhara6000
@saumyaneekhara6000 2 жыл бұрын
Thanks for the help and amazing channel
@kisshore3853
@kisshore3853 8 ай бұрын
Good tutorial and Explanation! thanks for the effort!! ❣
@sss3421
@sss3421 2 жыл бұрын
Hi your explanation is very very nice. this is very very useful video
@hemantsingh2962
@hemantsingh2962 2 жыл бұрын
This video cleared my my routing doubts thanks
@Viswanadhc
@Viswanadhc 3 жыл бұрын
Best Way of explanation.
@akash4952
@akash4952 2 жыл бұрын
great content loved it
@priyanshusingh7812
@priyanshusingh7812 3 жыл бұрын
fantastic as always !!!
@bazirakeeric7244
@bazirakeeric7244 2 жыл бұрын
wao! a good video , it helps me at least
@trustyourself867
@trustyourself867 2 жыл бұрын
all funtion are working perfectly.super video.and my suggestion form validation in used this program and more useful it.please add the formvalidation..otherwise all are very good.keep it top bro
@mosharofhossen9680
@mosharofhossen9680 Жыл бұрын
really very good tutorial. thank you so mush brother.
@dev.maazqureshi
@dev.maazqureshi Жыл бұрын
clear and concise,..thanks!
@tharunnair8344
@tharunnair8344 Жыл бұрын
Fantastic!!!..Many Thanks
@engincelik7740
@engincelik7740 Жыл бұрын
Very useful video . Thanks
@ayush_patel534
@ayush_patel534 2 жыл бұрын
Thanks for this information 👍😊
@surajkumarshukla681
@surajkumarshukla681 2 жыл бұрын
Really great video, please make video about authentication and user management.
@Anuj_Kumar_1
@Anuj_Kumar_1 2 жыл бұрын
thanks for this router video.....😊
@abhishekdutt1019
@abhishekdutt1019 2 жыл бұрын
appericable very nice dude
@price-action-trading
@price-action-trading Жыл бұрын
Awesome... Thank you very much
@gouthamshiv
@gouthamshiv 2 жыл бұрын
instant like and subscribe amazing content!!
@ashfannm7674
@ashfannm7674 2 жыл бұрын
Thank you very much sir. very helpful
@simranmishra3776
@simranmishra3776 Жыл бұрын
Awesome video. Thankyou
@karamjitsinghsehdev3451
@karamjitsinghsehdev3451 2 жыл бұрын
Nice Video Tarik.
@danpride2804
@danpride2804 2 жыл бұрын
Very well Done ! Thanks
@vietanho5262
@vietanho5262 Жыл бұрын
That's awsome video
@supersid-qt1mn
@supersid-qt1mn 2 ай бұрын
Awesome buddy ❤❤
@alexandrasimbolon3002
@alexandrasimbolon3002 2 жыл бұрын
wow amazing tutorial sir
@poojapoojitha9114
@poojapoojitha9114 2 жыл бұрын
Thank you so much for the video
@aaroncampos8948
@aaroncampos8948 2 жыл бұрын
Thank you so much, you help me a lot
@indrajiths4826
@indrajiths4826 2 жыл бұрын
Asome bro .. 👍
@thakurjaswantsingh148
@thakurjaswantsingh148 2 жыл бұрын
best tutorial on angular rroutinng
@revtikale2546
@revtikale2546 9 ай бұрын
awesome work!!!!!
@tsukiyomi84
@tsukiyomi84 2 жыл бұрын
Overall a good tutorial, next time I would recommend having two sets of code people can download. One with the starting project, with all the html, styles and anything non-router related already added, and one with the finished project for reference. Its easier for people to absorb information on a subject if they don't have to go through a lot of unrelated information first. The video is about routing but anyone following along will need to install and configure a bunch of packages and copy and paste a bunch of code. Thats unnecessary.
@Viswanadhc
@Viswanadhc 3 жыл бұрын
Really Hatsoff Bro
@MohitChauhan-ve9jw
@MohitChauhan-ve9jw Жыл бұрын
really superb
@nouchance
@nouchance Жыл бұрын
Amazing SIR!
@rainaveed438
@rainaveed438 Жыл бұрын
Really very helpful
@aktech9006
@aktech9006 2 жыл бұрын
tysm sir this helped me a lot 🤩😇
@CodeCatalyst
@CodeCatalyst 2 жыл бұрын
amazing explanation
@simran-3181
@simran-3181 2 жыл бұрын
Best explanation
@jptechnoservice9013
@jptechnoservice9013 2 жыл бұрын
Nice video
@pratikparmar346
@pratikparmar346 2 жыл бұрын
Nice tutorial ....
@shamavlogsnepal
@shamavlogsnepal 2 жыл бұрын
Very easy to understand
@abdulrenishr
@abdulrenishr 10 ай бұрын
Awesome bro
@rajeshkumarramachandran6883
@rajeshkumarramachandran6883 11 ай бұрын
Perfect demo
@SetsunaKiryuKengan
@SetsunaKiryuKengan Жыл бұрын
Man's a Legend
@sanmitsarkar2382
@sanmitsarkar2382 Жыл бұрын
Very helpful
@gowtham4383
@gowtham4383 Жыл бұрын
Thanks a lot 👍
@rohitkamble4769
@rohitkamble4769 Жыл бұрын
Thanks brother!
@muhammadbilalnoor6003
@muhammadbilalnoor6003 2 жыл бұрын
Thank You so much.
@srinivaspatnala696
@srinivaspatnala696 2 жыл бұрын
Thank you so much bro
@maheverse7223
@maheverse7223 2 жыл бұрын
Actually desiging login page is the best way to clarify all doubt about routing and authentication
@vishnutechbuddy3106
@vishnutechbuddy3106 2 жыл бұрын
Awesome
@ashutoshbisoyi8074
@ashutoshbisoyi8074 Жыл бұрын
thanks. this helped
@rajeevprajapati5083
@rajeevprajapati5083 2 жыл бұрын
eye opener
@vijbca
@vijbca 10 ай бұрын
Best video
@hmzza1
@hmzza1 2 жыл бұрын
Great
@juroltv3119
@juroltv3119 2 жыл бұрын
Great video, I really learned a lot. Please have the tutorial for nested routing in Users page using Resolver and Handling Path Parameters. :)
@chrisventer6490
@chrisventer6490 2 жыл бұрын
Thank you.
@DeepakKumar-gz7qv
@DeepakKumar-gz7qv 2 жыл бұрын
Perfect
@ram_2211
@ram_2211 2 жыл бұрын
Thanks a lot
@ReejohnStellas
@ReejohnStellas 2 жыл бұрын
Thank you
@kppranave2682
@kppranave2682 2 жыл бұрын
This is Gem
Routing in Angular 17 and Lazyload Standalone Components
13:54
Adnan Halilovic
Рет қаралды 15 М.
WHAT’S THAT?
00:27
Natan por Aí
Рет қаралды 14 МЛН
Как бесплатно замутить iphone 15 pro max
00:59
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 8 МЛН
Женская драка в Кызылорде
00:53
AIRAN
Рет қаралды 493 М.
Full stack web UI with Blazor in .NET 8 | .NET Conf 2023
55:56
MEAN and MERN stack AWS deployment Architecture - reduce cost by 90%
9:41
Angular 17 Login | With API Integration
28:21
LEARNING PARTNER
Рет қаралды 63 М.
Angular 15 CRUD app using material UI | JSON-server | step by step
1:26:26
Technical Babaji
Рет қаралды 287 М.
What is Observable | Observables | Angular 12+
14:16
procademy
Рет қаралды 149 М.
Angular Router - The Basics and Beyond
11:47
Fireship
Рет қаралды 128 М.
Difference between cookies, session and tokens
11:53
Valentin Despa
Рет қаралды 608 М.
WHAT’S THAT?
00:27
Natan por Aí
Рет қаралды 14 МЛН