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