angular2
這篇博客中，咱們將介紹Angular 2的三個核心概念：組件化，依賴注入，綁定。
開始構建APP吧
如今咱們描述一下將要構建的應用：它包含了一個科技講座的列表，你能夠經過講師speaker進行篩選，觀看講座或對講座進行評分，應用Demo以下：javascript
組件
你須要定義UI、路由等一系列組件去構建一個Augular 2應用。一個應用中老是存在一個根(主)組件，根組件中包含了其餘組件。簡而言之，每個Angular 2應用都有一棵對應的組件樹。咱們應用的組件樹看起來是這樣的：html
Application是根組件；Filters組件包含一個演講者speaker姓名輸入框和篩選按鈕；TalkList是你在Demo中看到的講座列表；TalkCmp是講座列表中的一個元素(一個講座)。java
爲了理解Angular 2中組件的構成，咱們先研究一下TalkCmp：web
TalkCmp.ts:編程
@Component({
selector: 'talk-cmp',
directives: [FormattedRating, WatchButton, RateButton],
templateUrl: 'talk_cmp.html'
})
class TalkCmp {
@Input() talk: Talk;
@Output() rate: EventEmitter;
//...
}
talk_cmp.htmlbootstrap
{{talk.title}}
{{talk.speaker}}
<formatted-rating [rating]="talk.rating"></formatted-rating>
<watch-button [talk]="talk"></watch-button>
<rate-button [talk]="talk"></rate-button>
INPUT & OUTPUT 屬性
每個組件都擁有input、output 屬性，咱們能夠在組件中經過屬性裝飾符語法定義這些屬性。後端
...
class TalkCmp {
@Input() talk: Talk;
@Output() rate: EventEmitter;
//...
}
...
經過input屬性，數據能夠流入到組件中；經過output屬性，數據能夠從組件中流出。數組
Input 和 output 是組件提供的公共API，在應用中初始化組件時你可使用它們。瀏覽器
<talk-cmp [talk]="someExp" (rate)="eventHandler($event.rating)"></talk-cmp>
經過屬性綁定(使用方括號語法)，你能夠設置input屬性的值；經過事件綁定，(使用圓括號語法)，你能夠綁定output屬性。服務器
每個組件老是有一個模板與之對應，模板定義了一個組件在頁面中的渲染方式。
@Component({
selector: 'talk-cmp',
directives: [FormattedRating, WatchButton, RateButton],
templateUrl: 'talk_cmp.html'
})
talk_cmp.html
{{talk.title}}
{{talk.speaker}}
<formatted-rating [rating]="talk.rating"></formatted-rating>
<watch-button [talk]="talk"></watch-button>
<rate-button [talk]="talk"></rate-button>
爲進行渲染，Angular須要事先知道：渲染中可使用哪些directives？使用什麼樣的模板？你能夠用templateUrl把模板文件定義在外部文件中，或者使用內聯的方式像下面這樣進行定義：
...
@Component({
selector: 'talk-cmp',
directives: [FormattedRating, WatchButton, RateButton],
template: `
{{talk.title}}
{{talk.speaker}}
<formatted-rating [rating]="talk.rating"></formatted-rating>
<watch-button [talk]="talk"></watch-button>
<rate-button [talk]="talk"></rate-button>
`
})
...
生命週期
Angular 2爲組件定義了完整的生命週期，你能夠在組件各個生命週期中進行介入。在TalkCmp組件中，咱們沒有訂閱其生命週期中的事件，這並不表明其餘組件不能。下面例子中的組件會在input屬性變化時收到通知。
@Component({selector: 'cares-about-changes'})
class CareAboutChanges {
@Input() field1;
@Input() field2;
onChange(changes) {
//..
}
}
服務提供者
一個組件能夠包含一系列服務提供者，其子組件也可使用這些服務。
@Component({
selector: 'conf-app',
providers: [ConfAppBackend, Logger]
})
class TalksApp {
//...
}
class TalksCmp {
constructor(backend:ConfAppBackend) {
//...
}
}
上面的例子中，咱們在根組件中聲明瞭後端服務(即服務器通訊)和日誌服務，這樣在應用中咱們均可以使用這些服務。接下來talksCmp組件注入後端服務(由於ConfAppBackend在根組件中作過聲明)。
咱們會在本文的第二部分詳細地介紹依賴注入，這裏咱們只用瞭解：經過組件進行依賴注入的設置。
宿主元素
爲了將Angular組件渲染成DOM樹，須要將Angular組件與一個DOM元素相關聯，咱們把這樣的DOM元素稱爲：宿主元素。
組件能夠與宿主元素進行以下方式的交互：
-
監聽宿主元素事件
-
更改宿主元素屬性
-
調用宿主元素方法
下面這個組件中，經過HostListener監聽宿主元素的輸入事件，而後去除輸入值兩端的空格，並將其存儲。Angular 會時時保持DOM元素與存儲值的一致性。
@Component({selector: 'trimmed-input'})
class TrimmedInput {
@HostBinding() value: string;
@HostListener("input", "$event.target.value")
onChange(updatedValue: string) {
this.value = updatedValue.trim();
}
}
請注意，上面的例子中我對DOM元素進行操做。Angular 2致力於提供更高層面的抽象接口：咱們能夠將Angular 2應用映射到原平生臺(好比iOS、Android)或者瀏覽器中。
這個理念極爲重要，由於：
-
咱們能夠更爲方便地重構應用
(與DOM解耦) -
能夠脫離DOM進行大多數單元測試。測試腳本會變得更加利於理解和編寫，測試效率也會顯著提高
-
能夠在web worker中運行Angular 2應用
-
能夠脫離瀏覽器環境，例如使用
NativeScript能夠在iOS、Android平臺運行Angular 2應用
可是有些時候，咱們仍是須要和DOM直接打交道。Angular 2 提供了這類接口，不過咱們但願你能儘量少地使用它們。
組件是定義完備的
組件由下面這些部分構成：
-
組件知道如何與宿主元素進行交互
-
組件知道如何對自身進行渲染
-
組件能夠進行依賴注入的設置
-
組件有定義
inputs和outputs屬性的接口
這些部分讓Angular 2元素具有了自我完備定義的能力，咱們能夠獨立地初始化一個組件，由於組件是定義完備的。
任意組件均可以bootstrap一個應用；任意組件均可以綁定在特定路由之上並渲染。任意組件能夠被其餘組件直接使用。雖然咱們定義的接口更少了，的可是帶來了高可複用性。
那麼DIRECTIVES呢?
若是你熟悉Angular 1，你必定會問：「directives去哪裏了？」
其實，directives一直都在。組件是最爲重要的directives，但並非惟一的directives。組件是具備模板的directive，你可使用裝飾器語法來定義沒有模板的directive。
小結
組件是構建 Angular 2應用的基礎：
-
它們有定義
inputs和outputs屬性的接口 -
有完整的生命週期
-
是定義完備的
依賴注入
如今討論 Angular 的另外一個重要基石——依賴注入。
依賴注入背後的思想很簡單：若是一個組件依賴一項服務，那麼組件不該該去直接生成這個服務實例。經過在構造方法constructor中注入，框架(指 Angular 2的 DI 框架)會把服務提供給你。面向接口編程而非實現進行編程，能夠下降代碼的耦合度，提升可測試性(好比mocking數據)，帶來諸多其餘好處。
Angular 2與生俱來擁有一個依賴注入模塊(固然該模塊能夠脫離Angular 2與其餘庫結合使用)。咱們試着從下面的組件瞭解如何進行依賴注入。這個組件會渲染講座列表。
@Component({
selector: 'talk-list',
templateUrl: 'talks.html'
})
class TalkList {
constructor() {
//..獲取數據
}
}
talks.html
<h2>Talks:</h2>
<div *ngFor="#t of talks">
{{t.name}}
</div>
讓咱們構造一個服務來提供模擬數據：
class TalksAppBackend {
fetchTalks() {
return [
{ name: 'Are we there yet?' },
{ name: 'The value of values' }
];
}
}
咱們如何調用這個服務？一種實現是：在咱們的組件中建立一個服務對象的實例，並調用實例方法：
class TalkList {
constructor() {
var backend = new TalksAppBackend();
this.talks = backend.fetchTalks();
}
}
做爲應用Demo來講，這麼作沒有問題。可是真實應用中這的確不是一個很好的解決方案。TalksAppBackend的做用不僅僅是返回一個講座對象的數組，它一樣須要經過http請求得到數據：在單元測試中，咱們理應須要發起http請求。
問題在於：咱們在TalkList中建立TalksAppBackend的實例形成了代碼的耦合(從面向對象單一職責的原則看，TalkList不該該關心TalksAppBackend的具體實現)。
經過在構造方法中注入TalksAppBackend能夠解決這個問題，注入的服務能夠在測試中簡單地替換，好比下面這樣：
class TalkList {
constructor(backend:TalksAppBackend) {
this.talks = backend.fetchTalks();
}
}
代碼告知 AngularTalksList 依賴於 TalksAppBackend。咱們一樣須要告知Angular 如何建立 TalksAppBackend服務。經過在組件中加入providers屬性能夠完成這個工做。
@Component({
selector: 'talk-list',
templateUrl: 'talks.html',
providers: [TalksAppBackend]
})
class TalkList {
constructor(backend:TalksAppBackend) {
this.talks = backend.fetchTalks();
}
}
TalksAppBackend服務須要在TalkList或者它的祖先組件中進行聲明。若是你習慣於 Angular 1 的編程風格，你能夠在根組件中設置全部的providers。這樣，全部的組件均可以直接使用這些服務了。
@Component({
selector: 'talk-app',
providers: [TalksAppBackend] // 在根組件中註冊，以後全部應組件均可以直接注入這些服務。
})
class Application {
}
@Component({
selector: 'talk-list'
})
class TalkList {
constructor(backend:TalksAppBackend) {
this.talks = backend.fetchTalks();
}
}
統一的依賴注入接口
Angular 1 和 Angular 2都有各自的依賴注入模塊。在Angular 1中，框架提供了好幾種依賴注入接口，有按照位置注入的(如 element)，有按照名稱注入的，有一點讓人困惑。Angular 2提供了單一的依賴注入接口。全部依賴注入都在組件的構造方法中完成。
好比，下面的組件注入了TalksAppBackend(通常都是單例的)，ElementRef(對於每個組件都不一樣)。
class TalksList {
constructor(elRef:ElementRef, backend:TalksAppBackend) {
}
}
咱們對於全局或者本地的依賴注入都使用一樣的接口，即使是在一個組件中注入其餘的組件。
class Component {
constructor(ancestor:AncestorCmp) {
}
}
小結
咱們並不會在使用依賴注入後立刻受益。但而後隨着應用複雜度的增長，使用依賴注入會愈來愈重要。
依賴注入使得咱們面向接口而不是實現進行編程，大大下降了代碼的耦合性，提升了可測試性。同時Angular 2提供了統一的依賴注入接口。
屬性綁定
Angular經過屬性綁定自動同步組件樹、模型和組件樹對應的DOM結構，爲了理解其重要性，咱們再回顧一下第一節中的應用。
咱們知道，用戶在輸入演講者speaker後，會產生一顆組件樹，以及對應的模型。假設模型是簡單的Javascript對象，而且看起來是這個樣子：
{
filters: {
speaker: "Rich Hickey",
}
talks: [
{
title: "Are we there yet?",
speaker: "Rich Hickey",
yourRating: null,
avgRating: 9.0
}
]
}
咱們試着來改變模型。假設我看了這個演講Are we there yet?而且以爲很贊，給了9.9的評分，模型會變爲下面的結構。
{
filters: {
speaker: "Rich Hickey",
}
talks: [
{
title: "Are we there yet?",
speaker: "Rich Hickey",
yourRating: 9.9,
avgRating: 9.0?
}
]
}
若是我須要找到依賴於這個值(個人評分)的全部部分而且更新它們，過程繁瑣且易出錯。咱們但願應用可以自動地映射值的改變，而屬性綁定正好可以賦予咱們。
在虛擬機每一循環週期的末尾，Angular會檢查組件樹中的每個組件，更確切地說，它將會檢查每個綁定的屬性(全部[]和{})，而且更新這些組件，在更新組件的同時，Angular也會依照組件樹更新對應的DOM結構。
僅僅使用了屬性綁定的input屬性能夠被更新。
ZONES
Angular 1中咱們須要經過scope.$apply告知框架進行髒值檢查。Angular 2 經過使用 Zone.js 進行髒值檢查，這意味着在使用第三方庫時，你不再須要使用scope.$apply進行髒值檢查了，所有交給框架就行了。
小結
Angular 2 經過屬性綁定，同步組件樹、模型和組件樹對應的DOM結構。Angular 2 使用 Zone.js 來獲知進行同步的時間點。
總結
Directives特別是組件，是 Angular 2 中最重要的部分：它們是構建 Angular 2 應用的基礎。組件時定義完備的，能夠經過接口定義組件的inputs、outputs屬性。組件經過私有API，來在組件各個生命週期產生鉤子。組件能夠與宿主元素進行交互。當組件須要依賴其餘服務或組件時，Angular 提供了依賴注入。組件樹，是 Angular 2的核心，使用屬性綁定和Zone.js使得Angular 2的開發更加便捷。
在開始 Angular 2 以前請先充分地理解上面這些概念。固然實際工程中須要的知識遠不止這些，這也是爲何咱們在 Angular 2 核心的基礎上又構建了一系列模塊的緣由，它們使得開發體驗更加愉悅，這些模塊包括：
-
處理表單和輸入的模塊
-
http模塊 -
強大的路由模塊
-
對動畫的支持的模塊
-
基於
material設計風格的UI組件 -
用以進行單元測試、端對端和性能測試的工具集
還有許多特性尚在開發之中，目前爲止進展順利。
- 1. Angular2 - 初學Angular2
- 2. angular2
- 3. Angular2
- 4. Angular2 EventEmitter
- 5. angular2+ Component
- 6. Angular2（AngularJS2）
- 7. Angular2 Router
- 8. Angular2.x
- 9. angular2 HostListener
- 10. Angular2 NgModule
- 更多相關文章...
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Angular2 - 初學Angular2
- 2. angular2
- 3. Angular2
- 4. Angular2 EventEmitter
- 5. angular2+ Component
- 6. Angular2（AngularJS2）
- 7. Angular2 Router
- 8. Angular2.x
- 9. angular2 HostListener
- 10. Angular2 NgModule