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


    环境:

    • 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 ----------------






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

  • 相关阅读:
    CodeForces 288A Polo the Penguin and Strings (水题)
    CodeForces 289B Polo the Penguin and Matrix (数学,中位数)
    CodeForces 289A Polo the Penguin and Segments (水题)
    CodeForces 540C Ice Cave (BFS)
    网站后台模板
    雅图CAD
    mbps
    WCF学习-协议绑定
    数据库建表经验总结
    资源位置
  • 原文地址:https://www.cnblogs.com/skywind/p/14323831.html
Copyright © 2020-2023  润新知