Angular中ngModule有什么用

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

作為Angular10教程，在我的理解中，angular相較于VUE，它的模塊化做得更好，這樣使代碼結構顯得更清晰。所以本節，我們將簡單介紹下angular語法，對ngModule的理解。【相關教程推薦：《angular教程》】

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

我的理解：其實就是被@NgModule所裝飾的普通的類，沒有什么特別的。

那么問題來了，什么又是@NgModule呢？

先來看看src/app/app.module.ts里默認代碼：

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

@NgModule 獲取一個元數據對象，它會告訴 Angular 如何編譯和啟動本應用。（元數據不止上面這幾個配置項，但我們先說這幾個）

declarations數組

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

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

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

• 在declarations中的組件默認只能在當前模塊中使用，要想讓其他模塊使用，必須exports出去

imports數組

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

providers數組

提供一系列服務

bootstrap數組

數組中的每個組件，都作為組件樹的根（根組件），引用在啟動的過程中，會將這里面的組件逐個解析并插入到瀏覽器的DOM中。

但是通常情況下，里面只會有一個AppComponent。

那angular組件又是什么樣呢？

先看app組件，src/app/app.component.ts的默認代碼：

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

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

可以看出，還是常規操作：引入–>配置–>導出

selector：

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

templateUrl：

Angular 組件模板文件的 URL。如果提供了它，就不要再用 template來提供內聯模板了（templateUrl和template選項二選一，必填配置）。

styleUrls：

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

如果組件比較簡單，我們也可以不必單獨抽出頁面及樣式，@Component的配置項可以直接使用內聯形式：

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';
}

到此為止，我們其實簡單講了下默認的這個App模塊，至于里面的app-routing.module.ts這個文件，咱們后面遇到了再說。

angular應用總的思路應該是這樣的：

舉例說明，如果一個angular應用是一個公司，那么AppModule就是這個公司。AppComponent就是這個公司的一個工廠，公司可以有很多個工廠。declearation數組里面的元素就是組成工廠的一部分，比如生產車間、人員管理系統等。imports數組就像是工廠請來的外援，專業性比較強。providers數組就像是后勤部門，提供各種服務。

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