脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular实现预加载延迟模块

Angular实现预加载延迟模块的示例

 更新时间：2017年10月12日 10:45:27   作者：冠军  
本篇文章主要介绍了Angular实现预加载延迟模块的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在使用路由延迟加载中，我们介绍了如何使用模块来拆分应用，在访问到这个模块的时候， Angular 加载这个模块。但这需要一点时间。在用户第一次点击的时候，会有一点延迟。

我们可以通过预加载路由来修复这个问题。路由可以在用户与其它部分交互的时候，异步加载延迟的模块。这可以使用户在访问延迟模块的时候更快地访问。

本文将在上一个示例的基础上，增加预加载的功能。

在上一节中，我们的根路由定义在 main.routing.ts，我们在 app.module.ts 中使用了根路由定义。

需要注意的是，Home 组件是提前加载的。我们将在系统启动之后渲染这个组件。

在 Angular 渲染 Home 组件之后，用户就可以与应用交互了，我们可以通过简单的配置在后台预加载其它模块。

启用预加载

我们在 forRoot 函数中，提供一个预加载的策略。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

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

这个 PreloadAllModules 策略来自 @angular/router，所以我们还需要导入它。

定制预加载策略

router 包中预定义了两个策略：

  1. 不预加载 NoPreloading
  2. 预加载所有模块 PreloadAllModules

5 秒之后加载模块

但是，您可以自己定义一个定制的策略。这比您想的要更为简单。例如，您希望在应用初始化 5 秒之后加载其余的模块。

您需要实现接口 PreloadingStrategy，我们定义一个 CustomPreloadingStrategy 的自定义策略类。

import { Route } from '@angular/router';
import { PreloadingStrategy } from '@angular/router';
import { Observable } from 'rxjs/Rx';

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

然后，修改 app.module.ts 使用这个自定义策略。需要注意的是，您还需要在 prodivers 中添加这个类。以实现依赖注入。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

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

你会看到 在 5 秒钟之后，这个功能模块被自动加载了。

加载指定模块

我们还可以在路由中定义附加的参数来指定哪些模块进行预加载，我们使用路由定义中的 data 来提供这个附加的数据。

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

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

然后，我们定义新的加载策略。

import { Observable } from 'rxjs/Rx';
import { PreloadingStrategy, Route } from '@angular/router';

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

最后，在 app.module.ts 中使用这个策略。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

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

此时，可以看到，模块直接被预加载了。即使您点击链接，也不会再有新的请求发生。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

    使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

    最近做项目时遇到了需要用到多选按钮选中触发事件的功能，小编试着手写一个指令，具体实现代码大家参考下本文吧
    2017-07-07
  • 从 Angular Route 中提前获取数据的方法详解

    从 Angular Route 中提前获取数据的方法详解

    这篇文章主要介绍了从 Angular Route 中提前获取数据,通过本文，你将学会使用 resolver， 在 Angular App 中应用 resolver，应用到一个公共的预加载导航，本文给大家介绍的非常详细，需要的朋友可以参考下
    2022-07-07
  • AngularJS表单验证中级篇（3）

    AngularJS表单验证中级篇（3）

    这篇文章主要为大家详细介绍了AngularJS表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 详解AngularJS中的http拦截

    详解AngularJS中的http拦截

    这篇文章主要为大家详细介绍了AngularJS中的http拦截，$http服务允许我们与服务端交互，有时候我们希望在发出请求之前以及收到响应之后做些事情。即http拦截,需要的朋友可以参考下
    2016-02-02
  • 详解什么是@ngrx/store开发包中的MemoizedSelector

    详解什么是@ngrx/store开发包中的MemoizedSelector

    这篇文章主要为大家介绍了@ngrx/store开发包中的MemoizedSelector使用分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 在Angular使用ng-container元素的操作详解

    在Angular使用ng-container元素的操作详解

    ng-container 是 Angular 2+ 中可用的一个元素,可以作为结构指令的宿主,在本文中,您将探讨可以使用 ng-container 解决的场景,文中有相关的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2024-02-02
  • 探索angularjs+requirejs全面实现按需加载的套路

    探索angularjs+requirejs全面实现按需加载的套路

    这篇文章主要探索了angularjs+requirejs全面实现按需加载的套路，围绕angularjs提供的各种机制进行研究，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • AngularJS中的指令全面解析(必看)

    AngularJS中的指令全面解析(必看)

    下面小编就为大家带来一篇AngularJS中的指令全面解析(必看)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • AngularJS实现单独作用域内的数据操作

    AngularJS实现单独作用域内的数据操作

    这篇文章给大家介绍了利用AngularJs如何实现ng-repeat内各个小的子作用域单独数据绑定。有需要的小伙伴们可以参考借鉴，下面来一起看看吧。
    2016-09-09
  • Angular依赖注入optional constructor parameters概念

    Angular依赖注入optional constructor parameters概念

    这篇文章主要为大家介绍了Angular 依赖注入领域里 optional constructor parameters 的概念及使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11

最新评论