Angular中ngModule有什么用

這篇文章主要介紹Angular中ngModule有什么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

作為Angular10教程，在我的理解中，angular相較于VUE，它的模塊化做得更好，這樣使代碼結(jié)構(gòu)顯得更清晰。所以本節(jié)，我們將簡(jiǎn)單介紹下angular語(yǔ)法，對(duì)ngModule的理解。【相關(guān)教程推薦：《angular教程》】

首先，什么是angular module（ngModule）?

我的理解：其實(shí)就是被@NgModule所裝飾的普通的類，沒(méi)有什么特別的。

那么問(wèn)題來(lái)了，什么又是@NgModule呢？

先來(lái)看看src/app/app.module.ts里默認(rèn)代碼：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// @NgModule(元數(shù)據(jù))
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } // 模塊名AppModule

@NgModule 獲取一個(gè)元數(shù)據(jù)對(duì)象，它會(huì)告訴 Angular 如何編譯和啟動(dòng)本應(yīng)用。（元數(shù)據(jù)不止上面這幾個(gè)配置項(xiàng)，但我們先說(shuō)這幾個(gè)）

declarations數(shù)組

這個(gè)單詞本身的意思是“公告、宣告”，在這里是本模塊的依賴項(xiàng)。包括模塊可能會(huì)依賴的一些組件、指令和管道。引入規(guī)則：

• 要使用他們，就必須先引入。 \

• 一個(gè)組件、指令或管道只能被一個(gè)模塊引入（聲明）

• 在declarations中的組件默認(rèn)只能在當(dāng)前模塊中使用，要想讓其他模塊使用，必須exports出去

imports數(shù)組

imports數(shù)組只會(huì)出現(xiàn)在@NgModule裝飾器中，一個(gè)模塊想要正常工作，除了本身的依賴項(xiàng)(declarations)，還可能需要其他模塊導(dǎo)出的依賴項(xiàng)。 只要是angular module，都可以導(dǎo)入imports數(shù)組中，比如自定義的模塊（如：AppRoutingModule），第三方或者ng內(nèi)置的（@angular/**）都可以

providers數(shù)組

提供一系列服務(wù)

bootstrap數(shù)組

數(shù)組中的每個(gè)組件，都作為組件樹的根（根組件），引用在啟動(dòng)的過(guò)程中，會(huì)將這里面的組件逐個(gè)解析并插入到瀏覽器的DOM中。

但是通常情況下，里面只會(huì)有一個(gè)AppComponent。

那angular組件又是什么樣呢？

先看app組件，src/app/app.component.ts的默認(rèn)代碼：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {// 組件名AppComponent
  title = 'hero';
}

可以看出，還是常規(guī)操作：引入–>配置–>導(dǎo)出

selector：

顧名思義，就是個(gè)選擇器，一個(gè)能通過(guò)原生JS選中的選擇器而已（必填配置）。

templateUrl：

Angular 組件模板文件的 URL。如果提供了它，就不要再用 template來(lái)提供內(nèi)聯(lián)模板了（templateUrl和template選項(xiàng)二選一，必填配置）。

styleUrls：

這也不難看出，就是引入一個(gè)或多個(gè)樣式路徑的配置（可選配置）

如果組件比較簡(jiǎn)單，我們也可以不必單獨(dú)抽出頁(yè)面及樣式，@Component的配置項(xiàng)可以直接使用內(nèi)聯(lián)形式：

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <h2>{{title}}</h2>
    <h3>My favorite hero is: {{myHero}}</h3>
    `,
  styles: [`h2 { color: red }`]
})
export class AppComponent { // 組件名AppComponent
  title = 'Tour of Heroes';
  myHero = 'Windstorm';
}

到此為止，我們其實(shí)簡(jiǎn)單講了下默認(rèn)的這個(gè)App模塊，至于里面的app-routing.module.ts這個(gè)文件，咱們后面遇到了再說(shuō)。

angular應(yīng)用總的思路應(yīng)該是這樣的：

舉例說(shuō)明，如果一個(gè)angular應(yīng)用是一個(gè)公司，那么AppModule就是這個(gè)公司。AppComponent就是這個(gè)公司的一個(gè)工廠，公司可以有很多個(gè)工廠。declearation數(shù)組里面的元素就是組成工廠的一部分，比如生產(chǎn)車間、人員管理系統(tǒng)等。imports數(shù)組就像是工廠請(qǐng)來(lái)的外援，專業(yè)性比較強(qiáng)。providers數(shù)組就像是后勤部門，提供各種服務(wù)。

以上是“Angular中ngModule有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！