1.理解組件
組件是一種特殊的指令吸祟，使用更簡單的配置項(xiàng)來構(gòu)建基于組件的應(yīng)用程序架構(gòu)這樣他能簡單地寫app缤沦，通過類似的web Component 或者angular2的樣式。web Component 是一個(gè)規(guī)范。馬上就要成為標(biāo)準(zhǔn)掀抹。
應(yīng)用組件的優(yōu)點(diǎn)：
比普通指令配置還簡單
提供更好的默認(rèn)設(shè)置和最好的實(shí)踐
對基于組建的應(yīng)用架構(gòu)更優(yōu)化。
對angular2的升級更平滑伊诵。
不用組建的情況:
對那些在 compile或者pre-link階段要執(zhí)行操作的指令单绑，組件不能用，因?yàn)闊o法到達(dá)那個(gè)階段曹宴。
如果你想定義指令的 priority搂橙，terminal，multi-element笛坦，也不能用区转。
組件只能通過元素標(biāo)簽觸發(fā)，其他的只能用命令版扩。
2.創(chuàng)建和配置組件
組件可以用.component 注冊（在 angular.module 創(chuàng)建的module）废离。這個(gè)方法有兩個(gè)參數(shù)
組件名稱
組件配置對象（和指令的區(qū)別，一個(gè)是工廠方法礁芦，一個(gè)是對象）
3.基于組件的應(yīng)用程序架構(gòu)
經(jīng)常說蜻韭，用組件構(gòu)建基于組件的應(yīng)用程序簡單方便。
組件只控制視圖和數(shù)據(jù)：組件永遠(yuǎn)不應(yīng)該修改作用域之外的DOM或數(shù)據(jù)柿扣。在angular中可以任意修改任何地方的數(shù)據(jù)肖方，因?yàn)閟cope是原型繼承和觀察的。這個(gè)是實(shí)踐出來的未状，但是俯画，導(dǎo)致的問題是你根本不清楚程序中哪一部分負(fù)責(zé)修改數(shù)據(jù)。
組件有一個(gè)定義很好的公共api--輸入和輸出司草。然而隔離的作用域能力有限艰垂，因?yàn)閍ngular使用雙向綁定。所以如果你傳遞一個(gè)對象到組件埋虹，用這種方式bindings:{item:'='}猜憎，修改一個(gè)屬性，這個(gè)改變就會反射到父級組件里面吨岭。對組件來說拉宗，只有組建自己的數(shù)據(jù)自己才能修改，這樣數(shù)據(jù)一旦修改辣辫，就可以很容易找到是誰修改的旦事。基于這個(gè)原因急灭，組件應(yīng)該遵循一些簡單的規(guī)范： .輸入應(yīng)該使用 < 和 @ bindings. <表示單向綁定姐浮，和 = 的區(qū)別是單向綁定的不被watch。這樣葬馋，你在內(nèi)部修改的屬性不會更新父級scope卖鲤。普遍的規(guī)則是永遠(yuǎn)不要改變scope中的對象或者數(shù)組屬性肾扰。@bindings 用在輸入時(shí)字符串，尤其是這個(gè)值不會改變的情況蛋逾。
bindings:{
hero: '<',
comment: '@'
}
//輸入 & 符號綁定集晚。來應(yīng)用外部回調(diào)函數(shù)
bindings:{
onDelete: '&',
onUpdate: '&'
}
//代替操作輸入數(shù)據(jù)，組件調(diào)用正確的輸出事件和改變的數(shù)據(jù)区匣，對刪除來說偷拔，組件不會刪除 hero自己，而是會通過事件發(fā)回自己的組件亏钩。
<!-- note that we use kebab-case for bindings in the template as usual -->
<editable-field on-update="$ctrl.update('location', value)"></editable-field>
<button ng-click="$ctrl.onDelete({hero: $ctrl.hero})">Delete</button>
組件有一個(gè)很好的聲明之后莲绰。每個(gè)組件都實(shí)現(xiàn)了生命周期鉤子。這些鉤子就是這個(gè)組件在某個(gè)生命周期調(diào)用的方法姑丑。組件實(shí)現(xiàn)了下面的一些鉤子方法:
. $onInit() --
一個(gè)應(yīng)用程序是一個(gè)組件的樹 理想情況下蛤签，整個(gè)程序都應(yīng)是一個(gè)組件樹。這個(gè)樹定義了很清晰的輸入和輸出栅哀。并且縮減雙向綁定到最少震肮，這樣組件的數(shù)據(jù)和狀態(tài)更清晰，能很好預(yù)測昌屉、判斷钙蒙。
