搜索
您的当前位置:首页正文

Angular预加载延迟模块怎么使用

2023-11-30 来源:谷彼宠物网

这次给大家带来Angular预加载延迟模块怎么使用,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 使用这个自定义策略。需要注意的是,您还需要在 propers 中添加这个类。以实现依赖注入。

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 loadedimport { 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 { }

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

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

js实现简易24小时时钟

ReactJS操作表单选择

小编还为您整理了以下内容,可能对您也有帮助:

Angular预加载延迟模块怎么使用

这次给大家带来Angular预加载延迟模块怎么使用,Angular预加载延迟模块使用的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

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

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

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

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

启用预加载

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

import { BrowserMole } from '@angular/platform-browser';

import { NgMole } from '@angular/core';

import { AppComponent } from './app.component';

import { HomeComponent } from './home/home.component';

import { routes } from './main.routing';

import { RouterMole } from '@angular/router';

import { PreloadAllMoles } from '@angular/router';

@NgMole({

declarations: [

AppComponent,

HomeComponent

],

imports: [

BrowserMole,

RouterMole.forRoot(routes, { preloadingStrategy: PreloadAllMoles })

],

providers: [],

bootstrap: [AppComponent]

})

export class AppMole { }

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

定制预加载策略

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

不预加载 NoPreloading

预加载所有模块 PreloadAllMoles

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.mole.ts 使用这个自定义策略。需要注意的是,您还需要在 propers 中添加这个类。以实现依赖注入。

import { BrowserMole } from '@angular/platform-browser';

import { NgMole } from '@angular/core';

import { AppComponent } from './app.component';

import { HomeComponent } from './home/home.component';

import { routes } from './main.routing';

import { RouterMole } from '@angular/router';

import { CustomPreloadingStrategy } from './preload';

@NgMole({

declarations: [

AppComponent,

HomeComponent

],

imports: [

BrowserMole,

RouterMole.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })

],

providers: [CustomPreloadingStrategy ],

bootstrap: [AppComponent]

})

export class AppMole { }

你会看到 在 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.mole#ShopMole', data: {preload: true} },

{ path: '**', component: HomeComponent }

];

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

import { Observable } from 'rxjs/Rx';

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

export class PreloadSelectedMoles implements PreloadingStrategy {

preload(route: Route, load: Function): Observable<any> {

return route.data && route.data.preload ? load() : Observable.of(null);

}

}

最后,在 app.mole.ts 中使用这个策略。

import { BrowserMole } from '@angular/platform-browser';

import { NgMole } from '@angular/core';

import { AppComponent } from './app.component';

import { HomeComponent } from './home/home.component';

import { routes } from './main.routing';

import { RouterMole } from '@angular/router';

import { PreloadSelectedMoles } from './preload.mole';

@NgMole({

declarations: [

AppComponent,

HomeComponent

],

imports: [

BrowserMole,

RouterMole.forRoot(routes, { preloadingStrategy: PreloadSelectedMoles })

],

providers: [PreloadSelectedMoles ],

bootstrap: [AppComponent]

})

export class AppMole { }

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

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

js实现简易24小时时钟

ReactJS操作表单选择

浅谈angular2路由预加载策略

本文主要介绍Angular实现预加载延迟模块的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

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

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

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

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

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

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

启用预加载

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

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

定制预加载策略

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

  1. 不预加载 NoPreloading

  2. 预加载所有模块 PreloadAllModules

5 秒之后加载模块

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

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

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

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

加载指定模块

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

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

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

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

浅谈angular2路由预加载策略

本文主要介绍Angular实现预加载延迟模块的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

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

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

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

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

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

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

启用预加载

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

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

定制预加载策略

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

  1. 不预加载 NoPreloading

  2. 预加载所有模块 PreloadAllModules

5 秒之后加载模块

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

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

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

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

加载指定模块

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

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

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

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

angular怎么实现预加载

使用angular内置的加载策略一次性加载所有的模块

angular4的在定义路由的时候可以对模块采用非初始就加载的方式进行处理,这样处理好的处是能够够节省资源开销,只有在用户需要的时候通过点击路由之后再加载对应的模块:

angular怎么实现预加载

使用angular内置的加载策略一次性加载所有的模块

angular4的在定义路由的时候可以对模块采用非初始就加载的方式进行处理,这样处理好的处是能够够节省资源开销,只有在用户需要的时候通过点击路由之后再加载对应的模块:

如何优化 Angular 2 框架搭建的项目?

您可以使用打包、懒加载、变化检测策略和缓存技术,再辅助第三方组件,来优化 Angular 2 框架搭建的项目。这些技术可以帮助您提高项目性能并减少代码体积 。

此外,您还可以考虑以下优化方法:

- 将应用程序拆分为模块,以便更好地组织和管理代码。

- 使用 AOT 编译而不是 JIT 编译,以获得更好的性能。

- 使用 lazy-loading 技术来延迟加载应用程序的某些部分,以便在需要时才加载它们。

- 使用 HTTP/2 协议来减少网络延迟和带宽使用量。

关于AngularJS 框架的使用有哪些经验值得分享

国内的确用的不多,但我们是一个,规模算大,用的人100左右,代码100w行以上,以后还会增加。十多个系统,金融类核心系统。

经验个人积累一点,可能和做互联网应用尤其是spa不太一样。

1. 业务类系统,赶快用吧,代码量少一半一般,越复杂优势越明显

2. 性能很多坑,网上的方案不够用的,ie8下很多不能直接the angular way,延迟加载是王道,多次bootstrap也常有,直接改源码常有

3. ui控件太少,完整套的要团队自己开发维护,个性化需求更需要从最底层定制

4. 官方的检验机制要吃透,复杂检验需求变化很多,要设计足够灵活,用watch $error方式又有性能坑

5. 指令是个好东西,重客户端组件化的方向,要理解透,用好

6. 模型设计上,服务端的贫血,充血之分这里可以借鉴。另外模型分类命名空间很重要

如果你的页面不复杂,就没那么多讲究了

最后,seo的,建议html两套,angular有类似工具

谷彼宠物网还为您提供以下相关内容希望对您有帮助:

Angular预加载延迟模块怎么使用

在 Angular 渲染 Home 组件之后,用户就可以与应用交互了,我们可以通过简单的配置在后台预加载其它模块。启用预加载我们在 forRoot 函数中,提供一个预加载的策略。import { BrowserModule } from '@angular/platform-browser'...

浅谈angular2路由预加载策略

在一些不需要预加载的场景加我们可以不配置,首先我们新建一个selective-preloading-strategy.ts的文件,使用class实现PreloadingStrategy接口的preload方法,代码如下:import { PreloadingStrategy,Route } from "@angular/router";imp...

angular怎么实现预加载

使用angular内置的加载策略一次性加载所有的模块 angular4的在定义路由的时候可以对模块采用非初始就加载的方式进行处理,这样处理好的处是能够够节省资源开销,只有在用户需要的时候通过点击路由之后再加载对应的模块:

angular js在手机端使用ng-click延迟3秒加载怎么解决

1.后台运行程序过多。请您结束在后台运行的不需要的软件程序,经常清理后台以提高手机运行速度。2.手机内存不足。请您定期将不需要的文件删除、卸载;以提高手机运行速度。3.若是运行某第三方软件时卡顿,建议将其卸载或安装...

关于AngularJS 框架的使用有哪些经验值得分享

1. 业务类系统,赶快用吧,代码量少一半一般,越复杂优势越明显 2. 性能很多坑,网上的方案不够用的,ie8下很多不能直接the angular way,延迟加载是王道,多次bootstrap也常有,直接改源码常有 3. ui控件太少,完整套...

Angular如何在应用初始化时运行代码详解

在示例中,我们使用它从服务器的 XML 配置文件中加载应用的设置信息。创建 AppLoad 模块尽管不是必要,通过创建 App Load module 还是对应用加载有助于隔离。import { NgModule, APP_INITIALIZER } from '@angular/core';...

Angular中怎样调用第三方库

三足鼎立的前端其实都是雷同的,不管是哪种前端框架都可以使用到这些第三方类库。以下我将从另一个视角解释 Angular 如何使用第三方类库的一种经验做法。一、写在前面在开始之前,需要先了解一下 TypeScript 模块系统 ——...

myeclipse怎么加载angularjs模块

1.用空白模板创建一个PhoneGap应用项目,选择以下插件:Device Notification GeoLocation Vibration 2.右键单击项目,选择 MyEclipse&gt;JavaScript Modules&gt;Install AngularJS support .3.双击项目的 www/index.html 文件,在编辑器中...

4个常见的Angular错误以及如何解决它们

您应该确保只导入正确和必要的模块。导入不熟悉的模块会增加应用程序中的错误。例如,如果要在Web浏览器上部署应用程序,则需要导入BrowserModulefrom @angular/platform-browser,并将其列入@NgModuleimports 数组中。

判断是angular 1还是2

支持服务器端的渲染对于搜索引擎的优化和用户感知体验来说是非常重要的;在一个比较大型的Angular 1 的应用中,即使使用了预先定义的缓存模块,我们可以清楚地看到当应用开始启动时,页面的加载过程。这时候看来 Angualr2 的这...

Top