Angular 12 2021 | 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.
Source code Link: https://github.com/Tariqu/routing
=============================================
For any Business/Freelancing enquiry contact us
Gmail :- tarique.rkl@gmail.com
WhatsApp :- +917978073704
=============================================
ng-bootstrap link : https://ng-bootstrap.github.io/#/home
Angular-FortAwesome Link : https://github.com/FortAwesome/angular-fontawesome
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
Видео Angular 12 2021 | Routing | LazyLoading | AuthGuard | multiple router-outlet | all in one video канала Technical Babaji
Source code Link: https://github.com/Tariqu/routing
=============================================
For any Business/Freelancing enquiry contact us
Gmail :- tarique.rkl@gmail.com
WhatsApp :- +917978073704
=============================================
ng-bootstrap link : https://ng-bootstrap.github.io/#/home
Angular-FortAwesome Link : https://github.com/FortAwesome/angular-fontawesome
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
Видео Angular 12 2021 | Routing | LazyLoading | AuthGuard | multiple router-outlet | all in one video канала Technical Babaji
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Lazy loading in angularAuthentication in Angular- AuthGuard | CanActivate | Role AuthAngular 12 Crash Course - 2021 - Become Angular Developer in 3 HoursMultiple Router Outlets in Angular using Named Outlets (2021)Routing and Navigation in Angular | MoshAngular - Login Page - Template Driven Forms - Hiding Navigation Bar - Routing - Paths Auth GuardsAngular Routing Tutorial for Beginners | Routing and Navigation | Angular Tutorial | EdurekaAngular Routing Tutorial | Angular Tutorial For Beginners | Angular Advanced Routing | SimplilearnAngular Router - The Basics and BeyondAngular 13 CRUD Operation Student Registration Using Json Server and database json in local systemLazy Loading in Angular in Hindi | Angular Modules | Angular 6/7/8+ Tutorial in Hindi 2021 [#56]Angular 13 responsive dashboard with sidebar in 5 min using angular materialAngular Tutorial - 23 - Routing and NavigationRoute Guard in Angular in Hindi | Angular Authentication Tutorial in hindi (2021) [#14]#Angular Router Guards Pt.1: CanActivate vs CanActivateChild (2021)React Router v6 in depth guideLearn Angular Material - Full TutorialAngular 11 Tutorial - Code a Project from ScratchAngular + ASP.NET Core + SQL Server | Simply Explained