Angular10教程--2.0 語法-ngModule簡介
技術標籤:angular教程angulartypescript
上一篇我們已經配置好了angular本地的開發環境。
作為Angular10教程,在我的理解中,angular相較於VUE,它的模組化做得更好,這樣使程式碼結構顯得更清晰。所以本節,我們將簡單介紹下angular語法,對ngModule的理解。
(原文檢視)
首先,什麼是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: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`,
styles: [`h1 { color: red }`]
})
export class AppComponent { // 元件名AppComponent
title = 'Tour of Heroes';
myHero = 'Windstorm';
}
到此為止,我們其實簡單講了下預設的這個App模組,至於裡面的app-routing.module.ts這個檔案,咱們後面遇到了再說。
angular應用總的思路應該是這樣的:
舉例說明,如果一個angular應用是一個公司,那麼AppModule就是這個公司。AppComponent就是這個公司的一個工廠,公司可以有很多個工廠。declearation數組裡面的元素就是組成工廠的一部分,比如生產車間、人員管理系統等。imports陣列就像是工廠請來的外援,專業性比較強。providers陣列就像是後勤部門,提供各種服務。
還是老樣子,歡迎關注我的公眾號: