架構預覽：模組 Modules / 元件 Components / 服務與依賴注入 Services and dependency injection / 路由 Routing

總覽：

Angular 是一個用 HTML 和 TypeScript 構建客戶端應用的平臺與框架。

Angular 本身使用 TypeScript 寫成的。它將核心功能和可選功能作為一組 TypeScript 庫進行實現，可以將它們匯入應用中。

Angular 的基本構造塊是 NgModule，它為元件提供了編譯的上下文環境。 NgModule 會把相關的程式碼收集到一些功能集中。Angular 應用就是由一組 NgModule 定義出的。 應用至少會有一個用於引導應用的根模組

• 元件定義檢視。檢視是一組可見的螢幕元素，Angular 可以根據你的程式邏輯和資料來選擇和修改它們。 每個應用都至少有一個根元件。

• 元件使用服務。服務會提供那些與檢視不直接相關的功能。服務提供商可以作為依賴被注入到元件中， 這能讓你的程式碼更加模組化、可複用，而且高效。

元件和服務都是簡單的類，這些類使用裝飾器來標出它們的型別，並提供元資料以告知 Angular 該如何使用它們。

• 元件類的元資料將元件類和一個用來定義檢視的模板關聯起來。 模板把普通的 HTML 和指令與繫結標記（markup）組合起來，這樣 Angular 就可以在呈現 HTML 之前先修改這些 HTML。

• 服務的元資料提供了一些資訊，Angular 要用這些資訊來讓元件可以通過依賴注入（DI）使用該服務。

應用的元件通常會定義很多檢視，並進行分級組織。 Angular 提供了路由 Router 服務來幫助你定義檢視之間的導航路徑。 路由器提供了先進的瀏覽器內導航功能。

（以上摘自Angular的官方文件）

這裡，怎麼能更好理解架構呢？

假設一個應用是一個完整的小汽車，元件（component）那麼就是每一個輪胎，引擎之類的零件，服務（service）就是就輪胎的安裝槽，使輪胎可以在這裡安裝，路由（Router）就是將每個連線各個零件的連線線，模版（Modules）就是汽車的底盤，組合所有的元件，通過路由連線，使之成為一個完整的汽車。