Angular2 + 中的模块加载模式-JavaScript中文网-JavaScript教程资源分享门户

引言

Angular2是当前前端开发者最为热门的框架之一，其采用了模块化的思想，依赖注入和依赖挂载等技术更是让其在前端界别树立起了标竿的地位。而在Angular2中，模块的加载是极其重要的一环，本篇文章将深入探讨Angular2中的模块加载模式。

模块加载模式

在Angular2中，模块是通过 import 和 export 语句导入和导出的。当一个组件或者服务需要使用到另一个组件或者服务时，会通过 import 语句引入该模块。而当这个模块内部需要使用其他模块时，就通过 export 语句将该模块导出，让外部模块能够引用。

在Angular2中，有三种模块加载模式，分别是Eager模式、Lazy模式和Preloaded模式。

Eager模式

Eager模式是默认的模块加载模式，它在应用启动时会将所有模块都加载进来，这样可以保证每个模块在应用运行期间都是可用的，也就是说，在Eager模式下，所有的模块都是预加载的，用户在访问每一个模块时都可以直接进入所需模块的路由。

下面是一个Eager模式的示例代码：

// app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

// app.component.ts

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

@Component({
  selector: 'my-app',
  template: '<h1>Hello Angular2!</h1>'
})
export class AppComponent { }

在这个示例代码中，我们可以看到，在AppModule中，我们通过import语句引入了BrowserModule。这个BrowserModule是Angular2中提供的一个官方模块，在应用的启动时就会直接将其加载进来，以保证在应用启动时，我们所需要的模块都已经加载完成，可以直接使用。

Lazy模式

与Eager模式不同，Lazy模式采用了按需加载的方式，也就是说，在Lazy模式下，只有在用户访问时才会真正加载所需的模块。这种模式可以让我们在应用运行时更加灵活地做出调整，以保证应用的性能和用户体验。

下面是一个Lazy模式的示例代码：

// app.module.ts

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

@NgModule({
  imports:      [ BrowserModule,
                   RouterModule.forRoot([
                     {
                       path: 'lazy',
                       loadChildren: 'app/lazy/lazy.module#LazyModule'
                     },
                     { path: '', redirectTo: '/lazy', pathMatch: 'full' },
                   ]) ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

// app.component.ts

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

@Component({
  selector: 'my-app',
  template: '<h1>Hello Angular2!</h1>'
})
export class AppComponent { }

// lazy.module.ts

import { NgModule }           from '@angular/core';
import { CommonModule }       from '@angular/common';
import { LazyComponent }      from './lazy.component';
import { RouterModule }       from '@angular/router';

@NgModule({
  imports:      [ CommonModule,
                   RouterModule.forChild([
                     { path: '', component: LazyComponent }
                   ]) ],
  declarations: [ LazyComponent ],
  exports:      [ LazyComponent ]
})
export class LazyModule { }

// lazy.component.ts

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

@Component({
  selector: 'my-lazy',
  template: '<h1>Hello Lazy!</h1>'
})
export class LazyComponent { }

在这个示例代码中，我们可以看到，在AppModule中，我们通过 import 语句引入了 RouterModule 模块，并且通过RouterModule.forRoot()方法配置了路由信息。特别地，在 Lazy 模式中，我们使用了 loadChildren 属性来引入了 LazyModule 模块，而这个模块只有在用户访问 '/lazy' 路径时才会被加载。

Preloaded模式

Preloaded模式与Lazy模式类似，但是这种模式中，Angular2会在后台预加载所有需要使用的模块，也就是说，应用启动时，Preloaded模式会将所有模块加载进来，但是在用户访问时，Preloaded模式只会加载用户需要使用的模块，极大地提升了应用的性能。

下面是一个Preloaded模式的示例代码：

// app.module.ts

import { NgModule }           from '@angular/core';
import { BrowserModule }      from '@angular/platform-browser';
import { RouterModule }       from '@angular/router';
import { AppComponent }       from './app.component';

@NgModule({
  imports:      [ BrowserModule,
                   RouterModule.forRoot([
                     { path: '', component: AppComponent }
                   ], { preloadingStrategy: PreloadAllModules }) ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

// app.component.ts

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

@Component({
  selector: 'my-app',
  template: `
    <a routerLink="/lazy">Lazy</a>
    <router-outlet></router-outlet>
  `
})
export class AppComponent { }

在这个示例代码中，我们可以看到，在AppModule中，我们通过 import 语句引入了 RouterModule 模块，并且通过RouterModule.forRoot()方法配置了路由信息，同时还通过 { preloadingStrategy: PreloadAllModules } 将 PreloadAllModules 赋给了 preloadingStrategy 属性。

总结

模块加载模式在Angular2中十分重要，是保证应用性能和用户体验的关键之一。在Eager模式、Lazy模式和Preloaded模式中，每种模式都有各自的优缺点，我们需要根据具体需求来选择合适的模式。在实际开发中，我们可以灵活地搭配这三种模式，通过整合这些模式，来为用户提供更加完美的应用体验。

本篇文章探讨了Angular2中的模块加载模式，使用了详细的示例代码来让读者更好地理解，相信对于正在学习Angular2的开发者们是极为有用的。我希望本篇文章能够给大家带来帮助和启示，同时也希望大家能够深入学习Angular2，并且用心打造出更加出色的应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659f8bdfadd4f0e0ff81fa77

Angular2 + 中的模块加载模式

引言

模块加载模式

Eager模式

Lazy模式

Preloaded模式

总结

纠错反馈