Angular implements preloading delay module example sharing-Mysql Tutorial-php.cn

Angular implements preloading delay module example sharing

小云云

Release： 2018-01-24 14:07:46

Original

1704 people have browsed it

This article mainly introduces the example of Angular implementing preloading delay module. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

In using route lazy loading, we introduced how to use modules to split applications. When accessing this module, Angular loads this module. But it takes a little time. There will be a slight delay when the user clicks for the first time.

We can fix this problem by preloading routes. Routers can load deferred modules asynchronously while the user interacts with other parts. This gives users faster access to deferred modules.

This article will add the preloading function based on the previous example.

In the previous section, our root route was defined in main.routing.ts, and we used the root route definition in app.module.ts.

It should be noted that the Home component is loaded in advance. We will render this component after the system boots.

After Angular renders the Home component, the user can interact with the application. We can preload other modules in the background through simple configuration.

Enable preloading

We provide a preloading strategy in the forRoot function.

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { routes } from &#39;./main.routing&#39;;
import { RouterModule } from &#39;@angular/router&#39;;
import { PreloadAllModules } from &#39;@angular/router&#39;;

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Copy after login

This PreloadAllModules strategy comes from @angular/router, so we also need to import it.

Customized preloading strategy

There are two predefined strategies in the router package:

No preloading
Preload all modulesPreloadAllModules

Load modules after 5 seconds

However, you can define it yourself A customized strategy. It's simpler than you think. For example, you want to load the remaining modules 5 seconds after your app initializes.

You need to implement the interface PreloadingStrategy. We define a custom strategy class of CustomPreloadingStrategy.

import { Route } from &#39;@angular/router&#39;;
import { PreloadingStrategy } from &#39;@angular/router&#39;;
import { Observable } from &#39;rxjs/Rx&#39;;

export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
    return Observable.of(true).delay(5000).flatMap((_: boolean) => fn());
  }
}

Copy after login

Then, modify app.module.ts to use this custom strategy. Note that you also need to add this class in propers. to implement dependency injection.

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { routes } from &#39;./main.routing&#39;;
import { RouterModule } from &#39;@angular/router&#39;;
import { CustomPreloadingStrategy } from &#39;./preload&#39;;

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })
 ],
 providers: [CustomPreloadingStrategy ],
 bootstrap: [AppComponent]
})
export class AppModule { }

Copy after login

You will see that after 5 seconds, this function module is automatically loaded.

Load the specified module

We can also define additional parameters in the route to specify which modules to preload, we use data in the route definition to provide this additional data.

import { Routes } from &#39;@angular/router&#39;;
// HomeComponent this components will be eager loaded
import { HomeComponent } from &#39;./home/home.component&#39;;

export const routes: Routes = [
  { path: &#39;&#39;, component: HomeComponent, pathMatch: &#39;full&#39; },
  { path: &#39;shop&#39;, loadChildren: &#39;./shop/shop.module#ShopModule&#39;, data: {preload: true} },
  { path: &#39;**&#39;, component: HomeComponent }
];

Copy after login

Then, we define the new loading strategy.

import { Observable } from &#39;rxjs/Rx&#39;;
import { PreloadingStrategy, Route } from &#39;@angular/router&#39;;

export class PreloadSelectedModules implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    return route.data && route.data.preload ? load() : Observable.of(null);
  }
}

Copy after login

Finally, use this strategy in app.module.ts.

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { routes } from &#39;./main.routing&#39;;
import { RouterModule } from &#39;@angular/router&#39;;
import { PreloadSelectedModules } from &#39;./preload.module&#39;;

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadSelectedModules })
 ],
 providers: [PreloadSelectedModules ],
 bootstrap: [AppComponent]
})
export class AppModule { }

Copy after login

At this point, you can see that the module is preloaded directly. Even if you click the link, no new request will occur.

Related recommendations:

Detailed explanation of how Laravel optimizes Model queries through preloading

Simple use of CSS to implement preloaded animation effect code explanation

JS implementation of image disordered preloading function code

The above is the detailed content of Angular implements preloading delay module example sharing. For more information, please follow other related articles on the PHP Chinese website!