[TOC] >[success] # 什么是模塊 **模塊不是組件** ，而是 **由功能劃分出來的一個大的頁面** ，然后 **這個模塊（頁面）中可能會用到許多的組件，指令，服務，管道等等功能** ，模塊分為 **3 個模塊**， **普通模塊（app文件夾下創建的是普通模塊）、根模塊（app文件夾就是根模塊）、共享模塊（也是app文件夾下的shared文件夾就是共享模塊，可以理解為全局的組件、方法引入都在這里引）** >[success] ## 模塊的配置文件屬性說明 每個 **模塊** 下都有一個 **【模塊名.module.ts】** 的 **文件**，**普通模塊** 的下可能還會創建出來一個 **【模塊名-routing.module.ts】** 的 **路由文件** ，**共享模塊** 中是沒有 **路由文件** 的。 * 每個 **模塊** 都會有一個名為 [**@NgModule({}) 的裝飾器（注解）**](https://angular.cn/api/core/NgModule) 這個 **裝飾器** 中可以 **增添一些配置** ，**這些配置都是我們模塊中用到的一些配置** ，**配置項** 具體有哪些，繼續 **往下看** * **declarations 數組** ：**模塊中使用的組件、指令或管道。** 注意每個 **組件/指令/管道 ，只能在一個模塊中聲明。** * **providers 數組**：**模塊中需要使用的服務** * **imports 數組**：**導入本模塊需要的 【依賴模塊】，注意是【模塊】** * **exports 數組**：**暴露給其它模塊使用的組件、指令或管道等。** 下面展示一下 **共享模塊、根模塊、普通模塊** 這 **3 個模塊** 的 **配置文件（模塊名.module.ts）** 1. **共享模塊配置文件代碼** **src\app\shared\shared.module.ts** ~~~ /** * 共享模塊 */ import { NgModule } from '@angular/core'; // 引入提供組件、指令或管道的模塊 import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; // 引入組件 import { HorizontalGridComponent, ImageSliderComponent, ScrollableTabComponent } from './components'; // 配置 @NgModule({ declarations: [ // 聲明我這個模塊有哪些組件 ScrollableTabComponent, ImageSliderComponent, HorizontalGridComponent ], /** * 導入 * CommonModule 導入后可以使用 基礎指令 * FormsModule 導入后可以使用 ngModel */ imports: [CommonModule, FormsModule], /** * 導出 * 把這些東西導出去供其他模塊使用，這個文件就是用來做一個【共通引用文件】 */ exports: [ CommonModule, FormsModule, ScrollableTabComponent, ImageSliderComponent, HorizontalGridComponent ] }) export class SharedModule {} ~~~ 2. **根模塊配置文件代碼** **src\app\app.module.ts** ~~~ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; // 引入組件 import { AppComponent } from './app.component'; // 引入共享模塊 import { SharedModule } from './shared/shared.module'; @NgModule({ declarations: [ // 聲明我這個模塊有哪些組件 AppComponent ], imports: [ // 該組件依賴的其他模塊 BrowserModule, SharedModule ], providers: [], bootstrap: [AppComponent] // 只有根模塊才有bootstrap屬性，也就是【根組件】 }) export class AppModule {} ~~~ 3. **普通模塊配置文件代碼** **src\app\my\my.module.ts** ~~~ import { NgModule } from '@angular/core'; // 引入路由文件 import { MyRoutingModule } from './my-routing.module'; // 引入共享文件 import { SharedModule } from '../shared/shared.module'; @NgModule({ declarations: [], imports: [MyRoutingModule, SharedModule] }) export class MyModule {} ~~~ >[success] # 模塊的劃分   >[success] # 創建模塊 **創建模塊指令** ~~~ // Home 是模塊名，如果后面加 --routing 就會額外生成一個路由文件，如果不加就只生成一個 home.module.ts 文件 ng g m Home --routing ~~~ 創建出來后就會在 **app** 文件夾中加入一個 **home** 文件，這個就是 **home 模塊**