Angular模塊有哪些

這篇文章主要講解了“Angular模塊有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Angular模塊有哪些”吧！

Overview

Angular 入坑記錄的筆記第七篇，介紹 Angular 中的模塊的相關(guān)概念，了解相關(guān)的使用場景，以及知曉如何通過特性模塊來組織我們的 Angular 應(yīng)用

對應(yīng)官方文檔地址：

• NgModule 簡介

• NgModules

• JavaScript 模塊 vs. NgModule

• 使用根模塊啟動應(yīng)用

• 常用模塊

• 特性模塊

Contents

1. Angular 從入坑到棄坑 - Angular 使用入門

2. Angular 從入坑到挖坑 - 組件食用指南

3. Angular 從入坑到挖坑 - 表單控件概覽

4. Angular 從入坑到挖坑 - HTTP 請求概覽

5. Angular 從入坑到挖坑 - Router 路由使用入門指北

6. Angular 從入坑到挖坑 - 路由守衛(wèi)連連看

7. Angular 從入坑到挖坑 - 模塊簡介

Knowledge Graph

Step by Step

前端模塊化

前端模塊化是指將程序中一組相關(guān)的功能按照一定的規(guī)則組織在一塊，整個模塊內(nèi)部的數(shù)據(jù)和功能實現(xiàn)是私有的，通過 export 暴露其中的一些接口（方法）與系統(tǒng)中的別的模塊進行通信

NgModule 簡介

在 Angular 應(yīng)用中，至少會存在一個 NgModule，也就是應(yīng)用的根模塊（AppModule）,通過引導(dǎo)這個根模塊就可以啟動整個項目

像開發(fā)中使用到 FormsModule、HttpClientModule 這種 Angular 內(nèi)置的庫也都是一個個的 NgModule，在開發(fā)中通過將組件、指令、管道、服務(wù)或其它的代碼文件聚合成一個內(nèi)聚的功能塊，專注于系統(tǒng)的某個功能模塊

常見的 NgModule 模塊

JavaScript 模塊與 NgModule

在 JavaScript 中，每一個 js 文件就是一個模塊，文件中定義的所有對象都從屬于那個模塊。 通過 export 關(guān)鍵字，模塊可以把其中的某些對象聲明為公共的，從而其它 JavaScript 模塊可以使用 import 語句來訪問這些公共對象

例如下面的示例代碼中，別的 javascript 模塊可以通過導(dǎo)入這個 js 文件來直接使用暴露的 getRoles 和 getUserInfo 方法

1
2
3
4
5
6
7
8
9
10
11
12

function getRoles() {
    // ...
}

function getUserInfo() {
    // ...
}

export {
    getRoles,
    getUserInfo
}

NgModule 是一個帶有 @NgModule 裝飾器的類，通過函數(shù)的參數(shù)來描述這個模塊，例如在上節(jié)筆記中創(chuàng)建的 CrisisModule，定義了我們在該特性模塊中創(chuàng)建的組件，以及需要使用到的其它模塊

在使用 @NgModule 裝飾器時，通常會使用到下面的屬性來定義一個模塊

• declarations：當前模塊中的組件、指令、管道

• imports：當前模塊所需的其它 NgModule 模塊

• exports：其它模塊中可以使用到當前模塊可聲明的對象

• providers：當前模塊向當前應(yīng)用中其它應(yīng)用模塊暴露的服務(wù)

• bootstrap：用來定義整個應(yīng)用的根組件，是應(yīng)用中所有其它視圖的宿主，只有根模塊中才會存在

應(yīng)用的根模塊

根模塊是用來啟動此 Angular 應(yīng)用的模塊， 按照慣例，它通常命名為 AppModule

通過 Angular CLI 新建一個應(yīng)用后，默認的根模塊代碼如下，通過使用 @NgModule 裝飾器裝飾 AppModule 類，定義了這個模塊的一些屬性特征，從而告訴 Angular 如何編譯和啟動本應(yīng)用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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 數(shù)組告訴 Angular 哪些組件屬于當前模塊。 當創(chuàng)建新的組件時，需要將它們添加到 declarations 數(shù)組中。每個組件都只能聲明在一個 NgModule 類中，同時，如果你使用了未聲明過的組件，Angular 將會報錯

同樣的，對于當前模塊使用到的自定義指令、自定義管道，也需要在 declarations 數(shù)組中進行聲明

imports

imports 數(shù)組表明當前模塊正常工作時需要引入哪些的模塊，例如這里使用到的 BrowserModule、AppRoutingModule 或者是我們使用雙向數(shù)據(jù)綁定時使用到的 FormsModule，它表現(xiàn)出當前模塊的一個依賴關(guān)系

providers

providers 數(shù)組定義了當前模塊可以提供給當前應(yīng)用其它模塊的各項服務(wù)，例如一個用戶模塊，提供了獲取當前登錄用戶信息的服務(wù)，因為應(yīng)用中的其它地方也會存在調(diào)用的可能，因此，可以通過添加到 providers 數(shù)組中，提供給別的模塊使用

bootstrap

Angular 應(yīng)用通過引導(dǎo)根模塊來啟動的，因為會涉及到構(gòu)建組件樹，形成實際的 DOM，因此需要在 bootstrap 數(shù)組中添加根組件用來作為組件樹的根

特性模塊

特性模塊是用來將特定的功能或具有相關(guān)特性的代碼從其它代碼中分離出來，聚焦于特定應(yīng)用需求。特性模塊通過它提供的服務(wù)以及共享出的組件、指令和管道來與根模塊和其它模塊合作

在上一章中，定義了一個 CrisisModule 用來包括包含與危機有關(guān)的功能模塊，創(chuàng)建特性模塊時可以通過 Angular CLI 命令行進行創(chuàng)建

1
2

-- 創(chuàng)建名為 xxx 的特性模塊
ng new component xxx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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 { }

當創(chuàng)建完成后，為了將該特性模塊包含到應(yīng)用中，需要和 BrowserModule、AppRoutingModule 一樣，在根模塊中 imports 引入

默認情況下，NgModule 都是急性加載的，也就是說它會在應(yīng)用加載時盡快加載，所有模塊都是如此，無論是否立即要用。對于帶有很多路由的大型應(yīng)用，考慮使用惰性加載的模式。惰性加載可以減小初始包的尺寸，從而減少程序首次的加載時間

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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 { }

感謝各位的閱讀，以上就是“Angular模塊有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Angular模塊有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！