Angular NgModule 模組 - 筆記長也NotesHazuya

Angular NgModule 模組

2020-12-31 22:13:00   Angular

本篇算是開始寫程式了,不過會先解析 Angular 的程式碼結構。在 Angular 當中會由不同的模組所組成,模組之間切分的依據可能是功能、流程等。

NgModule

專案建立完成都會有一個根模組叫做 AppModule ,透過 @NgModule 定義。

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

模組匯入

在模組如果要使用到其他模組,要將模組名稱加入 imports 陣列當中,例如上面程式碼匯入了 BrowserModule 和 AppRoutingModule 兩個模組。

模組元件

每一個元件都需要被宣告在特定且為唯一的模組之中,否則就算元件與模組是相同的名稱也無法被使用,因此要在 declarations 陣列中加入該模組會使用到的元件(Component)、指令 (Directive) 與管線 (Pipe) ,這些東西之後會再介紹。

元件匯出

Angular 上開發多模組的時候,預設元件只提供給相同模組下使用,所以如果要讓元件被其他模組使用,要 exports 元件給其他模組使用。

服務注入

providers 陣列放入需要被注入使用的服務清單,關於服務會在之後的文章介紹。

啟動元件清單

bootstrap 定義整個程式的根元件,只有根模組才會有此設定。定義的元件會在程式執行一開始被載入。

利用 Angular CLI 建立 NgModule

ng generate module [名稱] [參數]
ng g m [名稱] [參數]

檔案位置

預設會先依照名稱建立目錄,如果想在根目錄建立加上 --flat 參數即可。

指定匯入模組

可以加上 --module 參數來指定要匯入的其他模組。

如果要建立 AbcModule,只需要輸入名稱 Abc 即可,如果輸入 AbcModule 會變成 AbcModuleModule。

結論

本篇對於 NgModule 已經有了初步的介紹,也讓大家可以建立自己的 NgModule 了!

 


長也

糾結當中的資管系學生,常碰PHP,喜歡進行網頁相關的設計,閒暇之餘就記錄一些筆記,紀錄自己的學習軌跡。