了解angular10模块相关概念，快速入门！

本篇文章给大家了解一下angular10中的模块，介绍一下模块构成、ngmodule 属性、常用模块、angualr模块和js模块的区别以及模块懒加载，下面来一起看看。

模块概述

NgModule 模块是Angular种一个重要的点，因为Angular的基本构造块就是NgModule。NgModule 会把相关的代码（组件，指令，服务）收集到一些功能集中，形成功能单元。可以说：模块为组件，指令，服务提供了编译的上下文环境。【相关教程推荐：《angular教程》】

在使用Angular CL 命令新建一个项目的时候，会给我们生成一个根模块，命名为 AppModule，根模块有一个根组件AppComponent，引导这个根模块就可以启动应用。Angular 应用是模块化的，我们在开发中会根据其功能 作用 以及其特性，建立大大小小各种模块，从而构建其成为一个应用程序，任何模块都能包含任意数量的其它组件。

模块构成（基础，掌握）

angular模块就是一个带有@ngModule() 装饰器的类，装饰器@ngModule接受一个元数据对象。该对象的属性用来描述该模块。

declarations: 声明组件，指令，管道imports：引入依赖项exports：导出模块providers：服务注册bootstrap：指定宿主组件

import { BrowserModule } from '@angular/platform-browser';//从主模块中引入NgModule(模块装饰器或模块注解)import { NgModule } from '@angular/core';//引入组件，因为模块为组件提供编译的上下文环境import { AppComponent } from './app.component';// 引入路由模块import { AppRoutingModule } from './app-routing.module';//装饰器以json的形式声明元数据@NgModule({   //组合模块的组件和管道  declarations: [ AppComponent ],  //模块依赖项  imports: [ BrowserModule,AppRoutingModule ],  //子模块可以输入导出的模块  imports: [],  //模块提供的服务  providers: [],  //指定宿主组件，只在根模块中出现  bootstrap: [AppComponent]})export class AppModule { }

登录后复制

ngModule 属性解释(理解)

点进去@NgModule() 装饰器的类我们可以看到他有如下属性以及官方的对其属性的解释。

export declare interface NgModule {    providers?: Provider[];// 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）    declarations?: Array | any[]>;// 那些属于本 NgModule 的组件、指令、管道    imports?: Array | ModuleWithProviders | any[]>;// 那些导出了本模块中的组件模板所需的类的其它模块    exports?: Array | any[]>;//那些能在其它模块的组件模板中使用的可声明对象的子集    entryComponents?: Array | any[]>;    bootstrap?: Array | any[]>;    schemas?: Array;}

登录后复制

属性的详细解释

providers：将本模块所有在组件中注入的服务，在这里提前定义好，否则在此模块中使用这个服务会有错误提示。

declaration：declaration 英文意思为声明。在这里声明一些模块中要使用到的一些组件，指令，管道等。

imports：导入一些模块，比如说我把所有的指令构成一个模块 我使用其中某些指令的时候，我可以选择导入整个指令模块。也可以导入一些通过npm install 安装的一些模块导入其中，才可以使用。

exports：导出组件or指令管道等，以供引用此模块的模块可以使用此模块的组件or 指令管道等。

exporyComponents：entry component 表示 angular 的入口组件，可以引导组件是一个入口组件，Angular 会在引导过程中把它加载到 DOM 中。 其它入口组件是在其它时机动态加载的。字面上的意义，但是啥时候用呢，比如，我要弹出一个组件，那么这个组件是要动态加载到DOM中了吧，这个时候就需要将这个组件xxxComponent写上了。

bootstrap:这个模块启动的时候应该启动的组件，上面代码可以看到AppModule是作为根模块的启动组件。

schemas：不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明。

常用模块（基础，掌握）

BrowserModule@angular/platform-browser想要在浏览器中运行应用时CommonModule@angular/common当你想要使用 NgIf 和 NgFor 时FormsModule@angular/forms当要构建模板驱动表单时（它包含 NgModel ）ReactiveFormsModule@angular/forms当要构建响应式表单时RouterModule@angular/router要使用路由功能，并且你要用到 RouterLink,.forRoot() 和 .forChild() 时HttpClientModule@angular/common/http当你要和服务器对话时

如何创建一个模块（基础，掌握）（未完待续）

ng generate module  //创建一个模块ng g m  // 缩写ng g m order // 创建订单模块ng g m order --routing // 创建带路由订单模块

登录后复制

angualr模块和js模块有什么区别？（了解）

js模块（ES6 中的模块）

模块功能主要由两个命令构成：export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能

一般来说，一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

// profile.jsexport var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;// 优先考虑下面写法var firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName，lastName, year}

登录后复制

export 命令除了可以导出变量，还可以导出函数和类（class）

function a () {...}function b () {...}export {    a,    b as b_ // 通过as关键字重命名对外接口}

登录后复制

使用export命令定义了模块的对外接口后，其他js文件就可以通过import命令来加载这个模块了。

// main.jsimport {firstName, lastName, year} from './profile.js';function setName(element) {  element.textContent = firstName + ' ' + lastName;}

登录后复制

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同

我们也可以对加载的模块进行重命名

import { lastName as surname } from './profile.js';

登录后复制

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面

// circle.jsexport function area(radius) {  return Math.PI * radius * radius;}export function circumference(radius) {  return 2 * Math.PI * radius;}// 使用import * as circle from './circle';console.log('圆面积：' + circle.area(4));console.log('圆周长：' + circle.circumference(14))

登录后复制

这里有一个地方需要注意，模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变，下面的写法都是不允许的

import * as circle from './circle';// 下面两行都是不允许的circle.foo = 'hello';circle.area = function () {};

登录后复制

angualr模块

angualr模块在文章开头有作介绍（angualr模块概述和angualr模块构成）

NgModule 类 与 JavaScript 模块有下列关键性的不同：

NgModule 只绑定了可声明的类，这些可声明的类只是供 Angular 编译器用的。NgModule 与 JavaScript 类把它所有的成员类都放在一个巨型文件中不同，只要把该模块的类列在它的 @NgModule.declarations 列表中。NgModule 只能导出可声明的类。这可能是它自己拥有的也可能是从其它模块中导入的。它不会声明或导出任何其它类型的类。与 JavaScript 模块不同，NgModule 可以通过把服务提供商加到 @NgModule.providers 列表中，来用服务扩展整个应用。

相比之下我们可以看出，NgModule模块更灵活，扩展性强，更具优势。

模块懒加载

如果我们将所有的模块都导入根模块，那么应用在初始化加载的时候就会非常慢。这时候我们应该考虑使用惰性加载。根据需求加载相应都模块，减少应用初始化包的大小以及减少加载的时间，提高用户体验性。

惰性加载的模块特点是该模块拥有路由模块。因此 接着上面我们创建了一个订单模块 我们给订单模块加上路由。并再创建一个user.module以及user.module模块下的list组件。

ng g m user --routing //创建user模块ng g c user/list --skip-tests //在user模块里面创建组件list

登录后复制

创建order和user两个模块，list一个组件

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common'; //为一些结构性指令提供支持import { OrderRoutingModule } from './order-routing.module'; //模块具有自己的路由import { ListComponent } from './list/list.component'; //引入list组件@NgModule({  declarations: [ListComponent],  imports: [    CommonModule,    OrderRoutingModule  ]})export class OrderModule { }

登录后复制

配置子路由

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { ListComponent } from './list/list.component';const routes: Routes = [ //子路由的组件配置  {    path: 'list',    component: ListComponent  },];@NgModule({  imports: [RouterModule.forChild(routes)],  exports: [RouterModule]})export class OrderRoutingModule { }

登录后复制

user模块如此类推

配置总路由（重点，掌握）

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';const routes: Routes = [ //根路由的配置  {    path: 'orders',    loadChildren: './order/order.module#OrderModule' // 配置订单子模块  },  {    path: 'users',    loadChildren: './user/user.module#UserModule' // 配置用户子模块  }];@NgModule({  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule]})export class AppRoutingModule { }

登录后复制

我们给app.component.html新增两个button

  
    Welcome to {{ title }}!  
user //路由跳转order 

登录后复制

惰性加载模块有什么好处呢？

在大型项目中往往有许多个模块，而且大很大。如果一个模块1m，如果我们在浏览器输入地址打开这个应用，瞬间要加载100m 是非常慢的，而且我们并非要是用到着这100个模块。

将系统业务拆分为各个模块，划分好界限。按需加载，我点击了user 就加载user 模块，页面出现user 列表，对user进行操作。当我需要使用时才加载，极大的减少了页面初始加载的时间以及减少了资源的消耗。

模块共享

共享模块顾名思义，就是共享于所有的模块中。首先得定义好这个模块的具体功能特性，比如指令、管道和组件等分别封装成一个个模块，哪些业务模块需要使用到其里面的功能便导入其模块中便可。这极大的规范了系统的统一性和降低了以后的维护成本。

如果你引入了第三方UI，就不要把UI引入共享模块中导出，这样你的共享模块越来越庞大。别人UI框架设计的初衷就是按需加载。你把UI组件放到共享模块，加载那些无关的的UI组件，会浪费掉大量的性能。

更多编程相关知识，请访问：编程视频！！

以上就是了解angular10模块相关概念，快速入门！的详细内容，更多请关注【创想鸟】其它相关文章！