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






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

  • 相关阅读:
    (转)Netfilter分析
    (转)offsetof与container_of宏[总结]
    GNU GCC 扩展属性
    eclipse快捷键
    数据库SQL优化大总结之 百万级数据库优化方案(转载)
    公钥,私钥和数字签名这样最好理解 (转载)
    注解方式实现输入参数验证
    统一异常处理@RestContrllerAdvice,@ExceptionHandler(转载)
    JSONField解决序列化与反序列化字段匹配问题
    JDBC事务控制管理(转载)
  • 原文地址:https://www.cnblogs.com/skywind/p/14323831.html
Copyright © 2020-2023  润新知