• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Angular入门到精通系列教程(11)- 模块(NgModule),延迟加载模块

开发技术 开发技术 1个月前 (01-25) 15次浏览
  • 1. 摘要
  • 2. NgModule举例、说明
  • 3. Angular CLI生成模块
  • 4. 延迟加载模块
  • 5. 总结

环境:

  • Angular CLI: 11.0.6
  • Angular: 11.0.7
  • Node: 12.18.3
  • npm : 6.14.6
  • IDE: Visual Studio Code

1. 摘要

模块(NgModule)是Angular的核心概念之一。模块(NgModule)用于组织业务代码,按照自己的业务场景,把组件、服务、路由打包到模块里面。

模块(NgModule)的主要作用:

  1. NgModule 组织业务代码,开发者可以利用 NgModule 把关系比较紧密的组件组织到一起。
  2. NgModule 用来控制组件、指令、管道等的可见性,处于同一个NgModule 里面的组件默认互相可见,而对于外部的组件来说,只能看到NgModule 导出(exports)的内容。这样就实现了封装,只暴露希望暴露的组件、服务给调用者。
  3. NgModule 是 @angular/cli 打包的最小单位。打包的时候,@angular/cli 会检查所有 @NgModule 和路由配置,如果你配置了异步模块,cli 会自动把模块切分成独立的 chunk(块)。在 Angular 里面,打包和切分的动作是 @angular/cli 自动处理的,不需要你干预。当然,如果需要,你也可以修改angular的编译配置,基于Webpack 配一个环境出来,自定义打包规则。
  4. NgModule 是 Router 进行异步加载的最小单位,Router 能加载的最小单位是模块,而不是组件。当然,也可以一个模块里面只放一个组件是。

2. NgModule举例、说明

前文说过,Angular中任何的Component、service,都必须属于一个NgModule。所以,使用AngularCLI生成的框架程序,自动生成的组件,也是属于一个Component的,并且标记为启动模块。
这样,angular站点启动后,会以这个模块为入口,根据配置加载各个模块。

下面以默认生成的启动模块为例,进行解释:

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

  • declarations,用来放组件、指令、管道的声明;
  • imports,用来导入外部模块。比如当前模块需要调用其他模块的组件,需要加入到这里。比如上面例子,导入了Browser和Routing 2个模块。
  • providers,需要使用的第三方或者其他模块的Service 都放在这里;
  • bootstrap,定义启动组件。 一个可以启动的Angular项目(如果只是一个Library除外),需要定义一个启动组件。
  • exports, 声明的组件、指令和管道可以在导入了本模块的模块下任何组件的模板中使用。 导出的这些可声明对象就是该模块的公共 API。换句话说,其他模块想用本模块中定义的内容,需要在这里声明。
  • entryComponents, 如果其他模块想要动态加载本模块中的组件到视图中, 那么,这些组件需要写入entryComponents。

3. Angular CLI生成模块

AngularCLI是一个很好很强大的工具集,可以帮助我们生成很多基础代码、文件, 包括创建一个模块,并且可以制定参数

ng generate module <name> [options]

详情参考https://angular.io/cli/generate#module。

几个简单的例子:

  1. 创建feature1模块: ng generate module feature1
  2. 创建feature2模块, 并且带路由:ng generate module feature2 --routing
  3. 创建一个延迟加载的feature3模块(延迟加载模块,参考下面章节): ng generate module feature3 --route feature3 --module app.module

说明: ng generate module xxx 可以简写为 ng g m xxx

4. 延迟加载模块

延迟加载使得应用程序在启动时不被载入,而是结合路由配置,在需要时才动态加载相应模块。这样 Angular 就不需要在第一个界面从服务器下载所有的文件,直到请求它,才下载相应的模块。这对提供性能和减少首屏的初始下载文件尺寸有巨大的帮助,而且它可以很容易设置。

举例来说,上文创建了3个模块,主程序模块以及feature1、feature2会被打成一个包(js),feature3会被单独打一个包(js),当用户访问/feature3/* 的地址后,才会加载feature3这个包(js),否则永远不会请求、加载feature3的模块,从而提高性能(首页加载时间)。当一个项目大到一定程度时,最好考虑把某些模块设置为延迟加载模块。

延迟加载的路由定义(angular CLI会自动生成):

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'feature3',
    loadChildren: () =>
      import('./feature3/feature3.module').then((m) => m.Feature3Module),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}


最后复习一下生成延迟加载模块的命令ng generate module feature3 --route feature3 --module app.module,或者简写为 ng g m feature3 --route feature3 --module app.module

5. 总结

  1. Angular项目,就是模块(NgModule)的一个集合,任组件、服务等必须包含在一个模块中。
  2. 延迟加载模块用于提高首页加载性能。
  3. Angular CLI命令,生成模块。

—————- END —————-

======================


喜欢 (0)