Scribd Logo
Upload

Welcome to Scribd!

  • ACFrOgAvhC0lu0FCL5MnZ4mk YcYtut1Ck4SNc5AB4Yp2yy3ZKg9-Wemj3jh0DLAYqzNW678qw8ViGzHx18uFa0DlDXUm hZwhxkP9u1sXraR04zEME8M0zboMzRm H2h NSD 3i08oFaNQf5fIk

    Uploaded by

    ananga nayak
    5 views8 pages

    Original Title

    ACFrOgAvhC0lu0FCL5MnZ4mk_YcYtut1Ck4SNc5AB4Yp2yy3ZKg9-Wemj3jh0DLAYqzNW678qw8ViGzHx18uFa0DlDXUm_hZwhxkP9u1sXraR04zEME8M0zboMzRm_H2h_NSD_3i08oFaNQf5fIk

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views8 pages

    ACFrOgAvhC0lu0FCL5MnZ4mk YcYtut1Ck4SNc5AB4Yp2yy3ZKg9-Wemj3jh0DLAYqzNW678qw8ViGzHx18uFa0DlDXUm hZwhxkP9u1sXraR04zEME8M0zboMzRm H2h NSD 3i08oFaNQf5fIk

    Uploaded by

    ananga nayak

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    Lazy Loading of Routes

    - Eager Loading
    - Lazy Loading
    - All Angular modules “NgModules” of
    application are eagerly loaded.
    - Modules are loaded along with application.
    - It makes application heavy on browser.
    - It makes page rendering slow.
    - Even when you are not using any specific
    module, it is loaded into memory.
    - Lazy loading is design pattern.
    - Lazy loading allows to load “NgModules” only
    when they are required.
    - It keeps initial bundle size smaller.
    - It improves the render time.
    - It decreases the page load time.
    - It is more light weight on browser.
    - It can reach broad range of devices. [Mobile
    to Browser].

    Ex:
    - Create a new application
    > ng g application shopping --routing
    - Open “shopping – app” folder in integrated
    terminal
    - Generate the following modules
    > ng g module vendors --route vendors --
    module app.module
    > ng g module customers --route vendors --
    module app.module

    - Every module comprises of following files


    Note: Every module act as an application
    within the root application
    - Every module comprises of routes loaded
    forChild().
    Syntax:
    customers-routing.module.ts
    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from
    '@angular/router';

    import { CustomersComponent } from


    './customers.component';

    const routes: Routes = [{ path: '', component:


    CustomersComponent }];
    @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
    })
    export class CustomersRoutingModule { }
    Note: The lazy routes for modules are
    configured by using “loadChildren()” in the
    route configuration.
    Syntax:
    {path: ‘moduleName’, loadChildren: (import the
    module).then(load the module) }
    Ex:
    app-routing.module.ts
    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from
    '@angular/router';

    const routes: Routes = [


    { path: 'vendors', loadChildren: () =>
    import('./vendors/vendors.module').then(m =>
    m.VendorsModule) },
    { path: 'customer', loadChildren: () =>
    import('./customers/customers.module').then(
    m => m.CustomersModule) }
    ];

    @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
    })
    export class AppRoutingModule { }
    - Go to “app.component.html”
    <h2>
    Amazon Shopping
    </h2>
    <div>
    <button routerLink="">Home</button>
    <button
    routerLink="/customer">Customers</button>
    <button
    routerLink="/vendors">Vendors</button>
    </div>
    <div style="margin-top: 50px;">
    <router-outlet></router-outlet>
    </div>

    You can implement lazy loading for


    components by configuring lazy route:
    {path: 'electronics', loadChildren: ()=>
    import('./electronics/electronics.component').t
    hen(c => c.ElectronicsComponent) },

    FAQ: What is <base href=”/”> ?


    - Angular application can’t implement routing
    and accessing of resources when deployed
    on server without configuring “<base href>”.
    - Angular application is by default “SPA”.
    - It uses routing to access the components for
    Single Page.
    - All route apps must fallback to “index.html”.
    - If application is using “Angular router” then
    you must configure the server to return the
    application’s host page (index.html).
    - A routed application should support “deep
    links”.
    - Deep Link is a URL that specifies a path to a
    component inside app.
    Syntax:
    http://www.amazon.in/mobiles/details - it is
    a deep link.
    http://www.amazon.in – it is requesting host
    page. [index.html]
    - Then HTML <base href=”..”/> specifies a base
    path.
    - Base path defines where the application
    related static resources are present.
    - <base href=”/”> is referring to the application
    root level folder.
    - If your resources are configured in any
    another folder the you have to define it as
    base path.
    Syntax:
    <base href=”/project/app”>
    Ex:
    Index.html
    <head>
    <base href="/shopping">
    </head>
    FAQ: What is Route Guard?
    - It provides an authorized access to any
    configured route.

    You might also like