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

In this video you will learn all about angular routing so that you can start building your dream project soon.
=============================================
For any Business/Freelancing enquiry contact us
WhatsApp :- [phone]
=============================================

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

[gandamraviteja]

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

[rakhipramanik]

I would like to tell all the beginners, you have to follow this it's really Amazing you have to watch this till end.

[techmagictarun]

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

[pavanbhat]

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 <3

[srnkfkp]

In half an hour u have done a smart work bro... Thanks a lot

[vinaymahadevan]

Thanks. You saved 3 days of web searching with simple very clear video.

[prodbyovie]

Best Angular tutorial i have watched so far...Love it!!

[joaocorreiafreitas]

@TB thanks for this great Vídeo..short but provide very clear logic in routing management. Cheers

[hackerhunter]

Yes, you are talented. there are lot more theories in this video about angular we cannot found in months

[saoudiwalid]

The best video out there addressing Angular routing, 30 mins full of information, Great Job Tarik and Keep it Up

[KhushiParihar_Youtube_Channel]

Very helpful for Begginers . Great Quick start.

[DebasmitSamal]

Excellent... awesome. Very nice video which covers great thing for Angular developers. You made my day brother.

[vaibhavtripathi]

You are one of the finest content creator. Great work...

[namanjain]

Hi Tarique,

Very usefull and informative tutorial.
Thank you🙏

[imyuvraj]

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.

[tsukiyomi]

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.

[ehrazahmed]

This cleared all my concepts for routing using angular

[joeyvico]

A fantastic video! Thank you for your efforts

[suryaguthula]

Excellent simple sharp and clear ThanksBro for your efforts.

[raghibhussain]

this one is awesome, in very less time, described whole routing