[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 模塊**

- Angular8開發拼多多WebApp
- 框架對比
- 環境搭建與項目創建
- 開發工具配置
- 初始組件
- ngFor指令
- ngIf指令
- 樣式綁定的幾種方式
- 組件生命周期
- 在組件類中引用模版(類似vue 的 ref)
- 雙向綁定
- 什么是模塊
- 【以下目錄未完成】什么是注解(裝飾器)
- 指令的概念
- 組件的事件綁定和樣式綁定
- 組件嵌套和投影組件
- 路由概念
- 路由實戰
- 路由URL和參數
- 管道的概念
- 依賴注入
- 臟值檢測
- HTTP 概覽
- Postman 和 Rest Client 調試 HTTP
- Rest API
- HttpClient 修改
- Http 攔截器 HttpInterceptor
- 其他
- Angular終極課程
- RxJS快速入門