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

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供米脂網(wǎng)站建設(shè)、米脂做網(wǎng)站、米脂網(wǎng)站設(shè)計(jì)、米脂網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、米脂企業(yè)網(wǎng)站模板建站服務(wù)，10多年米脂做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

Overview

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

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

• NgModule 簡(jiǎn)介

• NgModules

• JavaScript 模塊 vs. NgModule

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

• 常用模塊

• 特性模塊

Contents

1. Angular 從入坑到棄坑 - Angular 使用入門(mén)

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

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

4. Angular 從入坑到挖坑 - HTTP 請(qǐng)求概覽

5. Angular 從入坑到挖坑 - Router 路由使用入門(mén)指北

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

7. Angular 從入坑到挖坑 - 模塊簡(jiǎn)介

Knowledge Graph

Step by Step

前端模塊化

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

NgModule 簡(jiǎn)介

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

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

常見(jiàn)的 NgModule 模塊

JavaScript 模塊與 NgModule

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

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

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

function getRoles() {
   // ...
}

function getUserInfo() {
   // ...
}

export {
   getRoles,
   getUserInfo
}

NgModule 是一個(gè)帶有 @NgModule 裝飾器的類，通過(guò)函數(shù)的參數(shù)來(lái)描述這個(gè)模塊，例如在上節(jié)筆記中創(chuàng)建的 CrisisModule，定義了我們?cè)谠撎匦阅K中創(chuàng)建的組件，以及需要使用到的其它模塊

在使用 @NgModule 裝飾器時(shí)，通常會(huì)使用到下面的屬性來(lái)定義一個(gè)模塊

• declarations：當(dāng)前模塊中的組件、指令、管道

• imports：當(dāng)前模塊所需的其它 NgModule 模塊

• exports：其它模塊中可以使用到當(dāng)前模塊可聲明的對(duì)象

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

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

應(yīng)用的根模塊

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

通過(guò) Angular CLI 新建一個(gè)應(yīng)用后，默認(rèn)的根模塊代碼如下，通過(guò)使用 @NgModule 裝飾器裝飾 AppModule 類，定義了這個(gè)模塊的一些屬性特征，從而告訴 Angular 如何編譯和啟動(dòng)本應(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 哪些組件屬于當(dāng)前模塊。 當(dāng)創(chuàng)建新的組件時(shí)，需要將它們添加到 declarations 數(shù)組中。每個(gè)組件都只能聲明在一個(gè) NgModule 類中，同時(shí)，如果你使用了未聲明過(guò)的組件，Angular 將會(huì)報(bào)錯(cuò)

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

imports

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

providers

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

bootstrap

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

特性模塊

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

在上一章中，定義了一個(gè) CrisisModule 用來(lái)包括包含與危機(jī)有關(guān)的功能模塊，創(chuàng)建特性模塊時(shí)可以通過(guò) Angular CLI 命令行進(jìn)行創(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 { }

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

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

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)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Angular模塊有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)頁(yè)題目：Angular模塊有哪些
本文URL：http://aaarwkj.com/article22/jeegcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站、企業(yè)建站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)