目錄

架構概覽

1. 用 Angular 擴充套件語法編寫 HTML 模板， 用元件類管理這些模板，用服務新增應用邏輯， 用模組打包釋出元件與服務。然後，我們通過引導根模組來啟動該應用。 Angular 在瀏覽器中接管、展現應用的內容，並根據我們提供的操作指令響應使用者的互動。
2. Angular應用中的8個主要構造塊：
   
   • 模組 (module)
   • 元件 (component)
   • 模板 (template)
   • 元資料 (metadata)
   • 資料繫結 (data binding)
   • 指令 (directive)
   • 服務 (service)
   • 依賴注入 (dependency injection)

模組

1. Angular 應用是模組化的，並且 Angular 有自己的模組系統，它被稱為 Angular 模組或 NgModules。
2. 每個 Angular 應用至少有一個模組（根模組），習慣上命名為AppModule。
3. Angular 模組（無論是根模組還是特性模組）都是一個帶有@NgModule裝飾器的類。
4. 裝飾器是用來修飾 JavaScript 類的函式。 Angular 有很多裝飾器，它們負責把元資料附加到類上，以瞭解那些類的設計意圖以及它們應如何工作。
5. NgModule是一個裝飾器函式，它接收一個用來描述模組屬性的元資料物件。其中最重要的屬性是：
   
   • declarations —— 宣告本模組中擁有的檢視類。 Angular 有三種檢視類：元件、指令和管道。
   • exports —— declarations 的子集，可用於其它模組的元件模板。
   • imports —— 本模組宣告的元件模板需要的類所在的其它模組。
   • providers —— 服務的建立者，並加入到全域性服務列表中，可用於應用任何部分。
   • bootstrap —— 指定應用的主檢視（稱為根元件），它是所有其它檢視的宿主。只有根模組才能設定bootstrap屬性。
6. Angular 提供了一組 JavaScript 模組。可以把它們看做庫模組。
7. 每個 Angular 庫的名字都帶有@angular字首。
8. 用 npm 包管理工具安裝它們，用 JavaScript 的import語句匯入其中某些部件。

元件

1. 元件負責控制螢幕上的一小塊區域，我們稱之為檢視。
2. 我們在類中定義元件的應用邏輯，為檢視提供支援。 元件通過一些由屬性和方法組成的 API 與檢視互動。

模板

1. 我們通過元件的自帶的模板來定義元件檢視。模板以 HTML 形式存在，告訴 Angular 如何渲染元件。

元資料（Metadata）

1. 元資料告訴 Angular 如何處理一個類。
2. 在TypeScript 中，我們用裝飾器 (decorator) 來附加元資料。
3. @Component裡面的元資料會告訴 Angular 從哪裡獲取你為元件指定的主要的構建塊。
4. 模板、元資料和元件共同描繪出這個檢視。
5. 其它元資料裝飾器用類似的方式來指導 Angular 的行為。 例如@Injectable、@Input和@Output等是一些最常用的裝飾器。

資料繫結

1. 資料繫結的語法有四種形式。每種形式都有一個方向——繫結到DOM、繫結自DOM以及雙向繫結。
2. 資料繫結的四種形式：插值表示式、屬性繫結、事件繫結、雙向資料繫結。
3. 雙向資料繫結使用ngModel指令組合了屬性繫結和事件繫結的功能。
4. 在雙向繫結中，資料屬性值通過屬性繫結從元件流到輸入框。使用者的修改通過事件繫結流回元件，把屬性值設定為最新的值。

指令（directive）

1. Angular 模板是動態的。當 Angular 渲染它們時，它會根據指令提供的操作對 DOM 進行轉換。
2. 指令是一個帶有“指令元資料”的類。在 TypeScript 中，要通過@Directive裝飾器把元資料附加到類上。
3. 元件是一個帶模板的指令；@Component裝飾器實際上就是一個@Directive裝飾器，只是擴充套件了一些面向模板的特性。
4. 除了元件這種型別的指令外，還有兩種其他型別的指令：結構型指令和屬性型指令。
5. 結構型指令和屬性型指令往往像屬性 (attribute) 一樣出現在元素標籤中， 偶爾會以名字的形式出現，但多數時候還是作為賦值目標或繫結目標出現。
6. 結構型指令通過在 DOM 中新增、移除和替換元素來修改佈局。如內建指令：*ngFor、*ngIf。
7. 屬性型指令修改一個現有元素的外觀或行為。在模板中，它們看起來就像是標準的 HTML 屬性，故名。如：ngModel。

服務

1. 服務是一個廣義範疇，包括：值、函式，或應用所需的特性。
2. 典型的服務是一個類，具有專注的、明確的用途。它應該做一件特定的事情，並把它做好。
3. 服務沒有什麼特別屬於 Angular 的特性。 Angular 對於服務也沒有什麼定義。 它甚至都沒有定義服務的基類，也沒有地方註冊一個服務。
4. 即便如此，服務仍然是任何 Angular 應用的基礎。元件就是最大的服務消費者。
5. 元件類應保持精簡。元件本身不從伺服器獲得資料、不進行驗證輸入，也不直接往控制檯寫日誌。 它們把這些任務委託給服務。
6. 元件的任務就是提供使用者體驗，僅此而已。它介於檢視（由模板渲染）和應用邏輯（通常包括模型的某些概念）之間。 設計良好的元件為資料繫結提供屬性和方法，把其它瑣事都委託給服務。

依賴注入

1. “依賴注入”是提供類的新例項的一種方式，還負責處理好類所需的全部依賴。大多數依賴都是服務。 Angular 使用依賴注入來提供新元件以及元件所需的服務。
2. Angular 通過檢視建構函式的引數型別得知元件需要哪些服務。
3. 當 Angular 建立元件時，會首先為元件所需的服務請求一個注入器 (injector)。
4. 注入器維護了一個服務例項的容器，存放著以前建立的例項。 如果所請求的服務例項不在容器中，注入器就會建立一個服務例項，並且新增到容器中，然後把這個服務返回給 Angular。 當所有請求的服務都被解析完並返回時，Angular 會以這些服務為引數去呼叫元件的建構函式。 這就是依賴注入。
5. 提供商用於建立並返回一個服務，通常是服務類本身。
6. 我們可以在模組或元件中註冊提供商。通常會把提供商新增到根模組上，以便在任何地方使用服務的同一個例項。或者，也可以在@Component元資料中的providers屬性中把它註冊在元件層。把它註冊在元件級表示該元件的每一個新例項都會有一個服務的新例項。
7. 依賴注入的要點：
   
   • 依賴注入滲透在整個 Angular 框架中，被到處使用。
   • 注入器 (injector) 是本機制的核心。
   • 注入器負責維護一個容器，用於存放它建立過的服務例項。
   • 注入器能使用提供商建立一個新的服務例項。
   • 提供商是一個用於建立服務的配方。
   • 把提供商註冊到注入器。

其他重要的Angular特性和服務

1. 動畫：用 Angular 的動畫庫讓元件動起來，而不需要對動畫技術或 CSS 有深入的瞭解。
2. 變更檢測：變更檢測文件會告訴你 Angular 是如何決定元件的屬性值變化，什麼時候該更新到螢幕， 以及它是如何利用區域 (zone) 來攔截非同步活動並執行變更檢測策略。
3. 事件：事件文件會告訴你如何使用元件和服務觸發支援釋出和訂閱的事件。
4. 表單：通過基於 HTML 的驗證和髒檢查機制支援複雜的資料輸入場景。
5. HTTP：通過 HTTP 客戶端，可以與伺服器通訊，以獲得資料、儲存資料和觸發服務端動作。
6. 生命週期鉤子：通過實現生命週期鉤子介面，可以切入元件生命中的幾個關鍵點：從建立到銷燬。
7. 管道：在模板中使用管道轉換成用於顯示的值，以增強使用者體驗。
8. 路由器：在應用程式客戶端的頁面間導航，並且不離開瀏覽器。
9. 測試：使用 Angular 測試平臺，在你的應用部件與 Angular 框架互動時進行單元測試。

APPMODULE: 根模組

1. Angular模組類描述應用的部件是如何組合在一起的。
2. 每個應用都至少有一個Angular模組，也就是根模組，用來引導並執行應用。常規名字是AppModule。
3. @NgModule裝飾器將AppModule標記為 Angular 模組類（也叫NgModule類）。 @NgModule接受一個元資料物件，告訴 Angular 如何編譯和啟動應用。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

imports 陣列

1. 每個瀏覽器中執行的應用都需要@angular/platform-browser裡的BrowserModule。 所以每個這樣的應用都在其根AppModule的imports陣列中包含BrowserModule。
2. imports陣列中應該只有NgModule類。不要放置其它型別的類。
3. JavaScript 的import宣告允許你訪問在其他檔案中匯出的符號，這樣你可以在當前檔案引用它們。
4. 模組的imports陣列告訴 Angular 特定 Angular 模組的資訊 — 用@NgModule裝飾的類 — 應用需要它們來正常工作。

declarations 陣列

1. 每個元件必須在且僅在一個NgModule類中宣告。
2. 通過將其列到AppModule模組的declarations陣列中，告訴 Angular 哪個元件屬於AppModule。 在建立更多元件的過程中，逐步將它們新增到declarations中。
3. 指令和管道也必須被新增到declarations陣列中。
4. 只有可以宣告的——元件、指令和管道屬於declarations陣列中。不要將其他型別的類新增到declarations中。例如NgModule類、服務類、模型類。

bootstrap 陣列

1. 通過引導根AppModule來啟動應用。 在啟動過程中，其中一步是建立列在bootstrap陣列的元件， 並將它們每一個都插入到瀏覽器的DOM中。
2. 每個被引導的元件都是它自己的元件樹的根。 插入一個被引導的元件通常觸發一系列元件的建立並形成元件樹。
3. 雖然你可以將多個元件樹插入到宿主頁面，但並不普遍。 大多數應用只有一個元件樹，它們引導單一根元件。
4. 你可以為這個根元件取任何名字，但是大多數程式設計師將其取名為AppComponent。

在main.ts中引導

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

1. 你可以為這個根元件取任何名字，但是大多數程式設計師將其取名為AppComponent。
2. 引導過程搭建執行環境，從模組的bootstrap陣列中提出根AppComponent， 建立該元件的例項，並將其插入到元件selector標識的元素標籤中。