Angular 从入坑到挖坑 - 模块简介

Overview

Angular 入坑记录的笔记第七篇，介绍 Angular 中的模块的相关概念，了解相关的使用场景，以及知晓如何经过特性模块来组织咱们的 Angular 应用

对应官方文档地址：

• NgModule 简介
• NgModules
• JavaScript 模块 vs. NgModule
• 使用根模块启动应用
• 经常使用模块
• 特性模块

Contents

1. Angular 从入坑到弃坑 - Angular 使用入门
2. Angular 从入坑到挖坑 - 组件食用指南
3. Angular 从入坑到挖坑 - 表单控件概览
4. Angular 从入坑到挖坑 - HTTP 请求概览
5. Angular 从入坑到挖坑 - Router 路由使用入门指北
6. Angular 从入坑到挖坑 - 路由守卫连连看
7. Angular 从入坑到挖坑 - 模块简介

Knowledge Graph

Step by Step

前端模块化

前端模块化是指将程序中一组相关的功能按照必定的规则组织在一块，整个模块内部的数据和功能实现是私有的，经过 export 暴露其中的一些接口（方法）与系统中的别的模块进行通讯

NgModule 简介

在 Angular 应用中，至少会存在一个 NgModule，也就是应用的根模块（AppModule）,经过引导这个根模块就能够启动整个项目

像开发中使用到 FormsModule、HttpClientModule 这种 Angular 内置的库也都是一个个的 NgModule，在开发中经过将组件、指令、管道、服务或其它的代码文件聚合成一个内聚的功能块，专一于系统的某个功能模块

常见的 NgModule 模块

模块名称	模块所在文件	功能点
BrowserModule	@angular/platform-browser	用于启动和运行浏览器应用的的基本服务
CommonModule	@angular/common	使用 NgIf、NgFor 之类的内置指令
FormsModule	@angular/forms	使用 NgModel 构建模板驱动表单
ReactiveFormsModule	@angular/forms	构建响应式表单
RouterModule	@angular/router	使用前端路由
HttpClientModule	@angular/common/http	发起 http 请求

JavaScript 模块与 NgModule

在 JavaScript 中，每个 js 文件就是一个模块，文件中定义的全部对象都从属于那个模块。 经过 export 关键字，模块能够把其中的某些对象声明为公共的，从而其它 JavaScript 模块能够使用 import 语句来访问这些公共对象

例以下面的示例代码中，别的 javascript 模块能够经过导入这个 js 文件来直接使用暴露的 getRoles 和 getUserInfo 方法

function getRoles() {
    // ...
}

function getUserInfo() {
    // ...
}

export {
    getRoles,
    getUserInfo
}
复制代码

NgModule 是一个带有 @NgModule 装饰器的类，经过函数的参数来描述这个模块，例如在上节笔记中建立的 CrisisModule，定义了咱们在该特性模块中建立的组件，以及须要使用到的其它模块

在使用 @NgModule 装饰器时，一般会使用到下面的属性来定义一个模块

• declarations：当前模块中的组件、指令、管道

• imports：当前模块所需的其它 NgModule 模块

• exports：其它模块中能够使用到当前模块可声明的对象

• providers：当前模块向当前应用中其它应用模块暴露的服务

• bootstrap：用来定义整个应用的根组件，是应用中全部其它视图的宿主，只有根模块中才会存在

应用的根模块

根模块是用来启动此 Angular 应用的模块， 按照惯例，它一般命名为 AppModule

经过 Angular CLI 新建一个应用后，默认的根模块代码以下，经过使用 @NgModule 装饰器装饰 AppModule 类，定义了这个模块的一些属性特征，从而告诉 Angular 如何编译和启动本应用

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

declarations

declarations 数组告诉 Angular 哪些组件属于当前模块。 当建立新的组件时，须要将它们添加到 declarations 数组中。每一个组件都只能声明在一个 NgModule 类中，同时，若是你使用了未声明过的组件，Angular 将会报错

一样的，对于当前模块使用到的自定义指令、自定义管道，也须要在 declarations 数组中进行声明

imports

imports 数组代表当前模块正常工做时须要引入哪些的模块，例如这里使用到的 BrowserModule、AppRoutingModule 或者是咱们使用双向数据绑定时使用到的 FormsModule，它表现出当前模块的一个依赖关系

providers

providers 数组定义了当前模块能够提供给当前应用其它模块的各项服务，例如一个用户模块，提供了获取当前登陆用户信息的服务，由于应用中的其它地方也会存在调用的可能，所以，能够经过添加到 providers 数组中，提供给别的模块使用

bootstrap

Angular 应用经过引导根模块来启动的，由于会涉及到构建组件树，造成实际的 DOM，所以须要在 bootstrap 数组中添加根组件用来做为组件树的根

特性模块

特性模块是用来将特定的功能或具备相关特性的代码从其它代码中分离出来，聚焦于特定应用需求。特性模块经过它提供的服务以及共享出的组件、指令和管道来与根模块和其它模块合做

在上一章中，定义了一个 CrisisModule 用来包括包含与危机有关的功能模块，建立特性模块时能够经过 Angular CLI 命令行进行建立

-- 建立名为 xxx 的特性模块
ng new component xxx
复制代码

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CrisisRoutingModule } from './crisis-routing.module';

import { FormsModule } from '@angular/forms';

import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component';


@NgModule({
  declarations: [
    CrisisListComponent,
    CrisisDetailComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    CrisisRoutingModule
  ]
})
export class CrisisModule { }
复制代码

当建立完成后，为了将该特性模块包含到应用中，须要和 BrowserModule、AppRoutingModule 同样，在根模块中 imports 引入

默认状况下，NgModule 都是急性加载的，也就是说它会在应用加载时尽快加载，全部模块都是如此，不管是否当即要用。对于带有不少路由的大型应用，考虑使用惰性加载的模式。惰性加载能够减少初始包的尺寸，从而减小程序首次的加载时间

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// 添加自定义的模块
import { CrisisModule } from './crisis/crisis.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CrisisModule, // 引入自定义模块
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
复制代码

占坑

        做者：墨墨墨墨小宇
        我的简介：96年生人，出生于安徽某四线城市，毕业于Top 10000000 院校。.NET程序员，枪手死忠，喵星人。于2016年12月开始.NET程序员生涯，微软.NET技术的坚决坚持者，立志成为云养猫的少年中面向谷歌编程最厉害的.NET程序员。
        我的博客：yuiter.com
        博客园博客：www.cnblogs.com/danvic712