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

Sdílet
Vložit
  • čas přidán 23. 07. 2021
  • 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

Komentáře • 171

  • @rakhipramanik2439
    @rakhipramanik2439 Před 2 lety +27

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

  • @pavanbhat5573
    @pavanbhat5573 Před 2 lety +8

    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

  • @KhushiParihar_Youtube_Channel

    Very helpful for Begginers . Great Quick start.

  • @vinaymahadevan2161
    @vinaymahadevan2161 Před 2 lety +1

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

  • @user-ky1yj7gy7u

    very good video with simple explanation

  • @joaocorreiafreitas712
    @joaocorreiafreitas712 Před 2 lety +1

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

  • @hackerhunter6212
    @hackerhunter6212 Před 2 lety +1

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

  • @prodbyovie6481

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

  • @maheshmhamane893
    @maheshmhamane893 Před 2 lety

    great tutorial every thing is here in

  • @neethuananthu5477
    @neethuananthu5477 Před 2 lety +1

    Very Informative video, thank you

  • @namanjain2449
    @namanjain2449 Před 2 lety +1

    Hi Tarique,

  • @saoudiwalid
    @saoudiwalid Před 2 lety

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

  • @akash4952
    @akash4952 Před 2 lety +2

    great content loved it

  • @DebasmitSamal294
    @DebasmitSamal294 Před 2 lety +1

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

  • @joeyvico
    @joeyvico Před rokem

    A fantastic video! Thank you for your efforts

  • @suryaguthula6531
    @suryaguthula6531 Před rokem

    Excellent simple sharp and clear ThanksBro for your efforts.

  • @atifsaeedkhan9207
    @atifsaeedkhan9207 Před rokem

    Excellent nd to the point with details. Thanks.

  • @engincelik7740
    @engincelik7740 Před rokem

    Very useful video . Thanks

  • @ehrazahmed8190
    @ehrazahmed8190 Před rokem +1

    This cleared all my concepts for routing using angular

  • @saumyaneekhara6000
    @saumyaneekhara6000 Před 2 lety +1

    Thanks for the help and amazing channel