angular認識模塊與組件

前言

咱們都知道一個angular應用一般會有多個模塊(Module)組成。而咱們又會在一個模塊下寫多個組件，讓咱們瞭解一些模塊與組件的基本構造吧。

模塊

angular中的模塊共有9個配置部分。其中最經常使用的有4部分爲私有資源列表、公有資源列表、協做模塊列表以及擴展功能列表。

如圖所示，咱們以appModule爲例逐一介紹一下。

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

咱們使用@NgModule聲明其爲一個模塊，同時@NgModule裏的內容爲此模塊的基本信息。

1. declarations：私有資源列表，咱們在這裏那些屬於本模塊的組件，指令和管道。
2. exports：導出表，咱們在這裏聲明哪些能夠被其餘模塊使用，若是咱們這裏沒有內容，即便咱們在別的模塊import這個模塊，也沒法使用這個模塊下面的組件。
3. imports：此爲協做模塊類表，咱們能夠理解爲咱們請其餘模塊來幫忙，其實咱們是請其餘模塊地下的一個或多個組件來幫忙，可是爲了防止重複，咱們直接請組件所在模塊幫忙。
4. providers：擴展功能列表，這裏提供本模塊所須要的Service，
5. bootstrap：定義啓動組件。這個配置項也能夠是一個數組，也就是說能夠指定作個組件做爲啓動點，可是這種用法是很罕見的。咱們一般只在appmodule中使用。

其中咱們簡單來理解一下providers和exports。若是咱們須要顯示某組件而初始化某組件，咱們就使用imports，若是咱們須要使用其組件方法，咱們就使用providers提供。簡單來講，若是v層須要組件，咱們就使用imports提供，若是c層須要組件，咱們就使用providers提供，這裏咱們沒法直接提供組件，咱們經過提供某某controller間接提供組件。

組件

同模塊同樣，組件經過@Component來聲明爲他是一個組件。

@Component({

selector: 'app-student-index',

templateUrl: './student-index.component.html',

styleUrls: \['./student-index.component.sass'\]

})

1.selector：是一個 CSS 選擇器，它會告訴 Angular，一旦在 HTML 中找到了這個選擇器對應的標籤，就建立並插入該組件的一個實例。
2.templateUrl：該組件的 HTML 模板文件相對於這個組件文件的地址。 另外，你還能夠用template屬性的值來提供內聯的 HTML 模板。
3.styleUrls：該組件的cass文件相對於這個文件的地址。你也能夠用styles屬性的值來提供內聯css。
若是咱們想在c層請其餘組件幫忙，咱們在構造函數中聲明

constructor(private studentService: StudentService,

private userService: UserService,

private appComponent: AppComponent,

private router: Router) {

}

angular會幫咱們自動注入。
咱們將全部的service都放到一個文件夾裏。可是咱們沒有放到一個module，這是涉及到搖樹優化的問題。具體再也不多說

總結

組件：把重複的代碼提取出來合併成爲一個個組件，組件最重要的就是重用（複用）

模塊：分屬同一功能/業務的代碼進行隔離（分裝）成獨立的模塊，能夠獨立運行，獨立管理，每一個模塊有不少接口，可供調用

組件化模塊化優勢：開發調試效率高、可維護性強、避免阻斷、版本管理更容易