前言
Angular 是採用元件化模組開發的框架，可以想像就是不同大大小小元件堆砌而成的網頁，這樣的情況下元件架構又是如何呢？
Angular 元件架構
從這張圖可以看出完整個的 Angular 應用程式，是由不同的元件所組成。
最上層的根元件預設名稱為 AppComponent ，而底下可能包含了 Header 元件與 ArticleList 元件。
- 而 Header 元件裡面可能只有單純的 HTML 或一些互動
- 而元件內可以放入其他元件，如 ArticleList 元件可以在包含其他不同的元件，像是
- ArticleHeader 元件
- ArticleBody 元件
也就是說在 Angular 的世界，網頁是由一層層的元件所組成。
而元件跟元件之間就有父子的關係，像是
- ArticleList 元件可以說是 ArticleHeader 、 ArticleBody 的父元件
- 反過來就是 ArticleHeader 、 ArticleBody 元件是 ArticleList 的子元件
元件之間的溝通
元件與元件之間是可以互相溝通的，例如：
- 資料存放於 ArticleList 元件上，而需要把資料往下傳送給子元件 ArticleBody
- 此時會在 ArticleBody 建立一個屬性準備接收資料，因此就能形成屬性繫結的關係
相反的，如果是子元件往父元件溝通呢？
- ArticleHeader 、 ArticleBody 有一個共同的父元件 ArticleList
- 此時可以透過事件繫結的方式來通知父元件
- 具體來說就是會在子元件內寫一些屬性、程式來通知父元件
- 此時可以透過事件繫結的方式來通知父元件
服務元件？
進階的元件與元件的溝通會藉由建立服務元件來達成。
而服務元件有可能會透過一種稱為相依注入 ( Dependency Injection ) 簡稱 DI 的技術，把預先設計好的服務元件直接注入到某個特定得元件內。
舉例來說，可以透過 DI 技術將某個服務元件注入到 ArticleList 元件內，或者是 ArticleHeader 元件等等。
而服務元件內封裝的就是不同元件之間需要共用的資料、方法等等
模組化
雖然這個架構看起來相當不錯，當網站越來越大時，通常會將相關的元件像是：
- ArticleList
- ArticleHeader
- ArticleBody
- 服務元件
把這些相關的元件封裝起來，獨立成為一個 Angular 的模組，像這種根據特定功能建立的模組，有時候也被稱為功能模組 (Feature Module)。
小結
好的，現在我了解在 Angular 內不同元件間是如何溝通的了，而且也覺得蠻熟悉的，儘管方法可能完全不同，但卻有點類似。
- 像是在 Vue 中 父子元件溝通的方式可以透過 props 傳入 、 emit 傳出，來達成父子元件溝通
- 也可以使用 event bus 或者 Vuex 來管理元件間的溝通
好了，讓我們繼續探索 Angular 吧。