1.理解組件
組件是一種特殊的指令，使用更簡單的配置項來構建基於組件的應用程序架構
這樣他能簡單地寫app，通過類似的web Component 或者angular2的樣式。
web Component 是一個規范。馬上就要成為標准。
應用組件的優點：
- 比普通指令配置還簡單
- 提供更好的默認設置和最好的實踐
- 對基於組建的應用架構更優化。
- 對angular2的升級更平滑。
不用組建的情況:
- 對那些在 compile或者pre-link階段要執行操作的指令，組件不能用，因為無法到達那個階段。
- 如果你想定義指令的 priority，terminal，multi-element，也不能用。
- 組件只能通過元素標簽觸發，其他的只能用命令。
2.創建和配置組件
組件可以用.component 注冊（在 angular.module 創建的module）。
這個方法有兩個參數
- 組件名稱
- 組件配置對象（和指令的區別，一個是工廠方法，一個是對象）
3.基於組件的應用程序架構
經常說，用組件構建基於組件的應用程序簡單方便。
- 組件只控制視圖和數據：組件永遠不應該修改作用域之外的DOM或數據。在angular中可以任意修改任何地方的數據，因為scope是原型繼承和觀察的。這個是實踐出來的，但是，導致的問題是你根本不清楚程序中哪一部分負責修改數據。
- 組件有一個定義很好的公共api--輸入和輸出。
然而隔離的作用域能力有限，因為angular使用雙向綁定。所以如果你傳遞一個對象到組件，用這種方式bindings:{item:'='}，修改一個屬性，這個改變就會反射到父級組件里面。對組件來說，只有組建自己的數據自己才能修改，這樣數據一旦修改，就可以很容易找到是誰修改的。基於這個原因，組件應該遵循一些簡單的規范：
.輸入應該使用 < 和 @ bindings. <表示單向綁定，和 = 的區別是單向綁定的不被watch。這樣，你在內部修改的屬性不會更新父級scope。普遍的規則是永遠不要改變scope中的對象或者數組屬性。@bindings 用在輸入時字符串，尤其是這個值不會改變的情況。
bindings:{
hero: '<',
comment: '@'
}
.輸入 & 符號綁定。來應用外部回調函數
bindings:{
onDelete: '&',
onUpdate: '&'
}
.代替操作輸入數據，組件調用正確的輸出事件和改變的數據，對刪除來說，組件不會刪除 hero自己，而是會通過事件發回自己的組件。
<!-- note that we use kebab-case for bindings in the template as usual -->
<editable-field on-update="$ctrl.update('location', value)"></editable-field><br>
<button ng-click="$ctrl.onDelete({hero: $ctrl.hero})">Delete</button>
- 組件有一個很好的聲明之后。每個組件都實現了生命周期鈎子。這些鈎子就是這個組件在某個生命周期調用的方法。組件實現了下面的一些鈎子方法:
. $onInit() --
- 一個應用程序是一個組件的樹
理想情況下，整個程序都應是一個組件樹。這個樹定義了很清晰的輸入和輸出。並且縮減雙向綁定到最少，這樣組件的數據和狀態更清晰，能很好預測、判斷。