本篇文章给大家了解一下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<Type<any> | any[]>;// 那些属于本 NgModule 的组件、指令、管道
imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>;// 那些导出了本模块中的组件模板所需的类的其它模块
exports?: Array<Type<any> | any[]>;//那些能在其它模块的组件模板中使用的可声明对象的子集
entryComponents?: Array<Type<any> | any[]>;
bootstrap?: Array<Type<any> | any[]>;
schemas?: Array<SchemaMetadata | any[]>;
}属性的详细解释
providers：将本模块所有在组件中注入的服务，在这里提前定义好，否则在此模块中使用这个服务会有错误提示。
declaration：declaration 英文意思为声明。在这里声明一些模块中要使用到的一些组件，指令，管道等。
imports：导入一些模块，比如说我把所有的指令构成一个模块 我使用其中某些指令的时候，我可以选择导入整个指令模块。也可以导入一些通过npm install 安装的一些模块导入其中，才可以使用。
exports：导出组件or指令管道等，以供引用此模块的模块可以使用此模块的组件or 指令管道等。
exporyComponents：entry component 表示 angular 的入口组件，可以引导组件是一个入口组件，Angular 会在引导过程中把它加载到 DOM 中。 其它入口组件是在其它时机动态加载的。字面上的意义，但是啥时候用呢，比如，我要弹出一个组件，那么这个组件是要动态加载到DOM中了吧，这个时候就需要将这个组件xxxComponent写上了。
bootstrap:这个模块启动的时候应该启动的组件，上面代码可以看到AppModule是作为根模块的启动组件。
schemas：不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明。
常用模块（基础，掌握）
| NgModule | 导入 | 使用 |
|---|---|---|
| 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 <module-name> //创建一个模块 ng g m <module-name> // 缩写 ng g m order // 创建订单模块 ng g m order --routing // 创建带路由订单模块
angualr模块和js模块有什么区别？（了解）
js模块（ES6 中的模块）
模块功能主要由两个命令构成：export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能
一般来说，一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量
// profile.js
export 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.js
import {firstName, lastName, year} from './profile.js';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同
我们也可以对加载的模块进行重命名
import { lastName as surname } from './profile.js';除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面
// circle.js
export 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一个组件
<!--order.module 订单模块-->
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 { }配置子路由
<!--order-routing.module 订单模块对应的路由模块-->
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模块如此类推
配置总路由（重点，掌握）
<!--AppRoutingModule 根路由模块-->
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
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h2>
Welcome to {{ title }}!
</h2>
</div>
<button routerLink="/user/list">user</button> //路由跳转
<button routerLink="/order/list">order</button>
<router-outlet></router-outlet>惰性加载模块有什么好处呢？
在大型项目中往往有许多个模块，而且大很大。如果一个模块1m，如果我们在浏览器输入地址打开这个应用，瞬间要加载100m 是非常慢的，而且我们并非要是用到着这100个模块。
将系统业务拆分为各个模块，划分好界限。按需加载，我点击了user 就加载user 模块，页面出现user 列表，对user进行操作。当我需要使用时才加载，极大的减少了页面初始加载的时间以及减少了资源的消耗。
模块共享
共享模块顾名思义，就是共享于所有的模块中。首先得定义好这个模块的具体功能特性，比如指令、管道和组件等分别封装成一个个模块，哪些业务模块需要使用到其里面的功能便导入其模块中便可。 这极大的规范了系统的统一性和降低了以后的维护成本。
如果你引入了第三方UI，就不要把UI引入共享模块中导出，这样你的共享模块越来越庞大。别人UI框架设计的初衷就是按需加载。你把UI组件放到共享模块，加载那些无关的的UI组件，会浪费掉大量的性能。
更多编程相关知识，请访问：编程视频！！
