Angular 學習三-模塊

1.NgModule經常使用模塊 --功能模塊

1. BrowserModule 導入自@angular/platform-browser ,使用場景:當想要在瀏覽器中運行應用時
2. CommonModule 導入自 @angular/common 使用場景:當想要使用Ngif 和NgFor時
3. FormsModule 導入自@angular/forms 使用場景:當要構建模板驅動表單時
4. ReactiveFormsModule 導入自@angular/forms 使用場景：當要構建響應式表單時
5. RouterModule 導入自@angular/router 使用場景: 當你想要使用RouterLink , forRoot() , forChild()要使用路由功能
6. HttpClientModule 導入自@angular/common/http 使用場景: 當你要和服務器對象時

2. @Component修飾器------視圖、相關業務邏輯的封裝

聲明一個組件時，在組件類的之上要用@Component裝飾器來告知Angular這是一個組件。

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

@Component({

`selector:app-root`
template:`
    <h1>{{title}}</h1>
    <h2>{{love}}<h2>
})`
複製代碼

export class AppComponent{

title:'xxx',
love:'xxx'
複製代碼

}

@Component最經常使用的幾個選項時:

1. selector：這個 CSS 選擇器用於在模板中標記出該指令，並觸發該指令的實例化。
2. template：組件的內聯模板，爲組件展現的內容，通常內容比較少時使用。若是提供了它，就不要再用 templateUrl 提供模板了
3. templateUrl：組件模板文件的 URL。若是提供了它，就不要再用 template 來提供內聯模板了,直接引用HTML文件
4. styleUrls: 直接引用css 文件
5. providers ：使用一個 令牌 配置該指令或組件的 注入器，該令牌會映射到一個依賴項的提供商
6. exportAs ：一個或多個名字，能夠用來在模板中把該指令賦值給一個變量。當有多個名字時，請使用逗號分隔它們

3.@NgModule({})主要屬性

1. declarations 模塊內部的列表, 聲明這個模塊
2. imports 導入其餘module，其餘module暴露的出的，好比導入CommonModule,之後接收可使用Ngif , Ngfor
3. providers 指定應用程序的根級別須要使用的service
4. bootstrap 一般是app啓動的根組件， 通常只有一個component. bootstrap中的組件會自動被放入到entryComponents
5. entryComponents 不會再模板中被引用到的組件，這個屬性通常狀況下只有ng 本身使用，通常是bootstrap組件或者路由組件， ng 會自動把bootstrap ， 路由組件放入其中，除非不經過路由動態將component加入dom 中，不然不會用到這個屬性

3.特性模塊的分類

1. 領域特性模塊: 領域特性模塊用來給用戶提供應用程序領域中特有的用戶體驗，好比編輯客戶信息或下訂單等。它們一般會有一個頂級組件來充當該特性的根組件，而且一般是私有的。用來支持它的各級子組件。領域特性模塊大部分由 declarations 組成，只有頂級組件會被導出。領域特性模塊不多會有服務提供商。若是有，那麼這些服務的生命週期必須和該模塊的生命週期徹底相同。領域特性模塊一般會由更高一級的特性模塊導出且只導出一次。對於缺乏路由的小型應用，它們可能只會被根模塊 AppModule 導入一次。
2. 帶路由的特性模塊:帶路由的特性模塊是一種特殊的領域特性模塊，但它的頂層組件會做爲路由導航時的目標組件。根據這個定義，全部惰性加載的模塊都是路由特性模塊。帶路由的特性模塊不會導出任何東西，由於它們的組件永遠不會出如今外部組件的模板中。惰性加載的路由特性模塊不該該被任何模塊導入。若是那樣作就會致使它被當即加載，破壞了惰性加載的設計用途。 也就是說你應該永遠不會看到它們在 AppModule 的 imports 中被引用。 當即加載的路由特性模塊必須被其它模塊導入，以便編譯器能瞭解它所包含的組件。路由特性模塊不多會有服務提供商，緣由參見惰性加載的特性模塊中的解釋。若是那樣作，那麼它所提供的服務的生命週期必須與該模塊的生命週期徹底相同。不要在路由特性模塊或被路由特性模塊所導入的模塊中提供全應用級的單例服務。
3. 路由模塊:路由模塊爲其它模塊提供路由配置，而且把路由這個關注點從它的配套模塊中分離出來。路由模塊一般會作這些：定義路由。把路由配置添加到該模塊的 imports 中。把路由守衛和解析器的服務提供商添加到該模塊的 providers 中。路由模塊應該與其配套模塊同名，可是加上「Routing」後綴。好比，foo.module.ts 中的 FooModule 就有一個位於 foo-routing.module.ts 文件中的 FooRoutingModule 路由模塊。 若是其配套模塊是根模塊 AppModule，AppRoutingModule 就要使用 RouterModule.forRoot(routes) 來把路由器配置添加到它的 imports 中。 全部其它路由模塊都是子模塊，要使用 RouterModule.forChild(routes)。按照慣例，路由模塊會從新導出這個 RouterModule，以便其配套模塊中的組件能夠訪問路由器指令，好比 RouterLink 和 RouterOutlet。路由模塊沒有本身的可聲明對象。組件、指令和管道都是特性模塊的職責，而不是路由模塊的。路由模塊只應該被它的配套模塊導入。
4. 服務特性模塊:服務模塊提供了一些工具服務，好比數據訪問和消息。理論上，它們應該是徹底由服務提供商組成的，不該該有可聲明對象。Angular 的 HttpClientModule 就是一個服務模塊的好例子。根模塊 AppModule 是惟一的能夠導入服務模塊的模塊。
5. 可視部件特性模塊:窗口部件模塊爲外部模塊提供組件、指令和管道。不少第三方 UI 組件庫都是窗口部件模塊。窗口部件模塊應該徹底由可聲明對象組成，它們中的大部分都應該被導出。窗口部件模塊不多會有服務提供商。若是任何模塊的組件模板中須要用到這些窗口部件，就請導入相應的窗口部件模塊。