Angular Dart 筆記(3) 架構

本篇參考官方文件Architecture Overview而來，這邊的程式片段都是來自教學，如果看不懂建議搭配著專案看。

Modules

核心價值模組化(Module)，也是程式設計概念推薦的做法，每個小模組做好自己的事情，然後可以將一堆小模組組合起來成為更大的功能。

Angular App是模組化，App是由很多模組組成的。

Components(元件)

包裝元件行為的Class

Templates(模板)

用來描述元件畫面的結構與行為綁定

Metadata

用來描述元件的相關設定

• selector:用來告訴Angular要將哪個Tag替換成component ex:<hero-list>
• templateUrl:模板檔案，也可以用template:直接寫再Metadata中，但比較不推薦
• directives:宣告會用到的其他component與directives
• providers:用來宣告需要被注入的依賴

Data binding(資料綁定)

手動綁定資料是乏味又容易出錯的

有四種機制

1. 插植 interpolation
   <li>{{hero.name}}</li>
   透過{{hero.name}}插值，顯示component的hero.name屬性值在<li>之中
2. 屬性綁定 property binding
   <hero-detail [hero]="selectedHero"></hero-detail>
   透過[hero]屬性綁定傳遞來自父元件HeroListComponent selectedHero的值給子元件HeroDetailComponent的hero屬性
3. 事件綁定 event binding
   <li (click)="selectHero(hero)"></li>
   透過(click)事件綁定，當使用者點hero的名字時呼叫Component的selectHero方法
4. 雙向綁定 two-way data binding
   <input [(ngModel)]="hero.name">
   透過單一符號，結合了屬性與事件綁定，使用ngModel指令。
   資料綁定在template與component和父component與子component間的溝通，扮演很重要的角色

Directives(指令)

有structural 跟 attribute directives.兩種種類

Structural directives 藉由增加、刪除或替換DOM中的elements 來改變Layout

• *ngFor
• *ngIf

Attribute directives 改變現有element的外觀或行為。在Template中它們看起來像正規的HTML attributes，因此就這樣命名。

• ngModel => <input [(ngModel)]="hero.name">

Services(服務)

幾乎可以是任何東西(value, function, or feature)，但建議是小而美物件

• logging service

• data service
• message bus
• tax calculator
• application configuration

Component classes 應該要精實，他們不應該從Server拿資料，驗證使用者輸入或顯示log到console，他們委託這些任務給Services。

一個Component 的工作是開啟使用者體驗與不做其他事情，它是View與Application logic的中介。一個好的個Component呈現是使用data binding的屬性和方法，它將一切不重要的東西委託給Services。

Angular不執行這些原則，假如你寫了一個廚房水槽Component有3000行，它也不會抱怨

Angular幫助你遵循這些原則，透過使你的應用程序邏輯成為服務，並使這些服務可用於組件通過依賴注入。

Dependency injection(依賴注入)

依賴注入是一種向類的新實例(instance )提供其所需的全部依賴的方式。大多數依賴是服務。 Angular使用依賴注入為新組件提供他們需要的服務。

當Angular建立一個Component，它會先向injector詢問Component所需要的Services。

injector維護他先前建立的service instances容器，如果一個被要求的service instance不在容器中，在回傳service給當Angular前，injector會建立一個並將他加到容器之中。當所有要求的服務被解決與返回，Angular會呼叫那些有services參數的Componet建構值。這就是依賴注入。

假如injector 沒有HeroService，它如何知道怎麼製造一個?

簡單來說，你必須先ˊ註冊一個HeroService 的provider 給injector。provider是一個會創造或回傳service的東西，通常是service本身。

你可以在application component tree的任何級別註冊providers ，通常，在應用引導時加入providers讓一樣的service instance到處都可以使用

註冊component等級的是指在每個新的component instance，你會獲得一個新的service instance。

關於依賴注入的要點

• 依賴注入連接到Angular框架中並在任何地方使用。
• injector是主要機制
• injector維護它所建立的service instances容器
• injector可以從provider建立一個新的service instances
• provider是創建service的秘訣
• 註冊provider給injector

看起來東西雖然很多，但其實核心概念並不難，就是元件跟依賴注入，後來發現中國也有人翻譯了，所以後續應該就不會繼續翻&整理了