注：以下學習筆記均來源于Angular官方文檔。

學習Angular之前應該具備HTML、CSS、JavaScript和最新標準的一些知識，比如類和模塊。Angular是基于TypeScript語法進行開發(fā)的，所以最好了解TypeScript的基礎語法，比如TypeScript的基礎類型。

一、什么是Angular？

Angular是一個基于Typescript構建的開發(fā)平臺。它包括：

• 一個基于組件的框架，用于構建可伸縮的Web應用。

• 一組完美集成的庫，涵蓋各種功能，包括路由、表單管理、客戶端-服務器通信等。

• 一套開發(fā)工具，可幫助你開發(fā)、構建、測試和更新代碼。

二、Angular應用：知識要點

（1）組件

組件包括三個部分：

• 帶有@Component裝飾器的TypeScript類。

• HTML模板。

• 樣式文件。

?@Component裝飾器會指定如下Angular專屬信息：

• 一個CSS選擇器，用于定義如何在HTML模板中使用組件。模板中與此選擇器匹配的HTML元素將成為該組件的實例。

• 一個HTML模板，用于指示Angular如何渲染此組件。

• 一組可選的CSS樣式，用于定義模板中HTML元素的外觀。

最小化的Angular組件：

在HTML模板中使用此組件：

Angular渲染此組件，生成如下DOM：

（2）模板

每個組件都有一個HTML模板，用于聲明該組件的渲染方式。你可以內聯(lián)它或用文件路徑定義此模板。

• Angular支持動態(tài)插入值。

當組件的狀態(tài)更改時，Angular會自動更新已渲染的DOM。

此功能的應用之一是插入動態(tài)文本：

這里message的值來自組件類：

當應用加載組件及其模板時，用戶將看到以下內容：

• Angular還支持屬性綁定。
  

• Angular還可以聲明事件監(jiān)聽器來監(jiān)聽并響應用戶的操作，比如按鍵、鼠標移動、單擊和觸摸等。

• Angular還可以用指令來為模板添加額外的功能。

Angular中最常用的指令是*ngIf和*ngFor。你可以使用指令執(zhí)行各種任務，比如動態(tài)修改DOM結構。你還可以用自定義指令來創(chuàng)建出色的用戶體驗。

*ngIf指令的例子：

（3）依賴注入

依賴注入工作原理示例：

文件logger.service.ts中定義了一個Logger類。它包含一個writeCount函數(shù)，該函數(shù)將一個數(shù)字記錄到控制臺。

hello-world-di.component.ts文件中定義了一個Angular組件。該組件包含一個按鈕，它會使用此Logger類的writeCount函數(shù)。要訪問此功能，可通過向構造函數(shù)中添加private logger: Logger來把Logger服務注入到HelloWorldDI類中。

（4）Angular CLI

Angular CLI是開發(fā)Angular應用最快、最簡單和推薦的方式。舉例：

（5）自帶庫

Angular提供的一些庫包括：

• Angular路由：高級的客戶側導航功能與基于Angular組件的路由機制。支持惰性加載、嵌套路由、自定義路徑匹配規(guī)則等。

• Angular表單：統(tǒng)一的表單填報與驗證體系。

• Angular HttpClient：健壯的HTTP客戶端庫，它可以支持更高級的客戶端-服務器通訊。

• Angular動畫：豐富的動畫體系，用于驅動基于應用狀態(tài)的動畫。

• Angular PWA：一些用于構建漸進式Web應用（PWA）的工具，包括Service Worker和Web應用清單（Manifest）。

• Angular原理圖：一些搭建腳手架、重構和升級的自動化工具。用于簡化大規(guī)模應用的開發(fā)。