第六章 Http??
除非只是一個(gè)Demo,否則你的Angular程序總要和后端數(shù)據(jù)打交道氮凝,這個(gè)時(shí)候就離不開Http模塊了们豌。? 本章主要是通過(guò)一些相對(duì)簡(jiǎn)單的例子來(lái)介紹Angular Http模塊的使用树碱,包括:??
(1)如何注入HttpModule
(2)編寫最基本的http request交惯,請(qǐng)求一個(gè)網(wǎng)址次泽,并獲得JSON響應(yīng)數(shù)據(jù)
(3)編寫高級(jí)一些的帶參數(shù)的 http 請(qǐng)求穿仪,但是要注意 ?? ?的是該例子訪問(wèn)的是youtube的API,所以你要想獲得code example里的響應(yīng)數(shù)據(jù)就得搭梯子意荤。
(4)用RxJS處理返回?cái)?shù)據(jù)(response)啊片。
如果沒(méi)有接觸過(guò)RxJS,對(duì)于Observable(可觀察對(duì)象) 這樣的寫法可能會(huì)感到不適應(yīng)玖像,不過(guò)也沒(méi)有太大關(guān)系紫谷,本書作者非常體貼的拿出了兩個(gè)章節(jié)的篇幅來(lái)介紹“可觀察對(duì)象”架構(gòu),更深入的資料可以參考RxJS文檔(?? 要看rxjs 5.x的)捐寥,還有中文參考笤昨。
第七章 路由
如果是了解Angular.JS 1.x 的朋友會(huì)熟悉基于錨點(diǎn)標(biāo)記的路由(hash-based routing)方式,例如 http://domain.com/#/login
在Angular 2/4 當(dāng)中握恳,這種方式依然是得到支持的咬腋,但是官方文檔里強(qiáng)烈建議我們采用HTML5路由模式,即更加自然的路由:
http://domain.com/login
本章對(duì)于兩種實(shí)現(xiàn)方式都給出了例子睡互,那么——
哪種策略更好?
我們必須選擇一種策略陵像,并且在項(xiàng)目的早期就這么干就珠。一旦該應(yīng)用進(jìn)入了生產(chǎn)階段,要改起來(lái)可就不容易了醒颖,因?yàn)橥饷嬉呀?jīng)有了大量對(duì)應(yīng)用URL的引用妻怎。
目前看來(lái),幾乎所有的Angular項(xiàng)目都會(huì)使用默認(rèn)的HTML 5風(fēng)格泞歉。它生成的URL更易于被用戶理解逼侦,它也為將來(lái)做服務(wù)端渲染預(yù)留了空間。
在服務(wù)器端渲染指定的頁(yè)面腰耙,是一項(xiàng)可以在該應(yīng)用首次加載時(shí)大幅提升響應(yīng)速度的技術(shù)榛丢。那些原本需要十秒甚至更長(zhǎng)時(shí)間加載的應(yīng)用,可以預(yù)先在服務(wù)端渲染好挺庞,并在少于一秒的時(shí)間內(nèi)完整呈現(xiàn)在用戶的設(shè)備上晰赞。
只有當(dāng)應(yīng)用的URL看起來(lái)像是標(biāo)準(zhǔn)的Web URL,中間沒(méi)有hash(#)時(shí)选侨,這個(gè)選項(xiàng)才能生效掖鱼。
除非你有強(qiáng)烈的理由不得不使用錨點(diǎn)標(biāo)記路由,否則就應(yīng)該堅(jiān)決使用默認(rèn)的HTML 5路由風(fēng)格援制。
本章還非常詳細(xì)的介紹了嵌套路由的開發(fā)過(guò)程戏挡,使得我們能夠結(jié)合組件(component)開發(fā)出具有非常復(fù)雜UI的單頁(yè)面系統(tǒng),這在angular1.x時(shí)是一級(jí)很麻煩的事情晨仑,然而我們新版的路由系統(tǒng)已經(jīng)把這件事解決的很好了褐墅,甚至為了兼顧路由系統(tǒng)的版本號(hào)拆檬,把Angular的版本號(hào)從2.x直接跳級(jí)到4.x,所以大家就放心的用吧掌栅。
對(duì)于需要更深入了解Angular路由的朋友秩仆,建議看看Angular團(tuán)隊(duì)重要成員Victor Savkin?的寫的Angular路由一書。
第八章 依賴注入
依賴注入(Dependency injection)是重要的程序設(shè)計(jì)模式猾封。 Angular 有一套自己的依賴注入框架澄耍,離開了它,你就沒(méi)法玩 Angular 程序了晌缘。 實(shí)際上DI在angular.js 1.x的時(shí)候被引入的齐莲,而且也是ng1.x的最重要特色之一,但是寫起來(lái)有時(shí)候挺麻煩的磷箕;而在Angular2/4中选酗,DI的使用就大大的被化簡(jiǎn)了。
我們可以把注入器看作new操作符的替代品岳枷,也就是說(shuō)芒填,不依賴于使用語(yǔ)言提供的new操作符,依賴注入讓我們配置并創(chuàng)建對(duì)象空繁。
本章開頭以一個(gè)PriceService為例殿衰,介紹了使用依賴注入的好處:依靠DI我們可以得到一個(gè)更加松耦合的架構(gòu)。這時(shí)盛泡,當(dāng)修改某個(gè)單一部件(component)時(shí)闷祥,對(duì)程序中其他區(qū)域的影響就小多了。同時(shí)傲诵,只要這些部件之間的接口沒(méi)有變凯砍,我們甚至可以在不修改其他部件中實(shí)現(xiàn)代碼的情況下集體更換它們。
對(duì)于PriceService這個(gè)例子拴竹,需要指出的是悟衩,中文版書中的代碼與英文最新版有些差異(英文版中采用了了“價(jià)格接口” IPriceService),所以要想更好的理解這個(gè)例子請(qǐng)閱讀源代碼栓拜。
如圖6所示:在Angular的DI系統(tǒng)中局待,我們不是直接導(dǎo)入和創(chuàng)建一個(gè)類的新實(shí)例,而是通過(guò)以下步驟:
(1)注冊(cè)“依賴關(guān)系”
(2)描述如何注入依賴關(guān)系
(3)用注入器注入依賴關(guān)系
本章后半部分則介紹了如何用NgModule來(lái)組織注入依賴菱属,關(guān)于NgModule的內(nèi)容钳榨,大家還可以參考Angular中文官網(wǎng)的文檔。
第九章 Angular數(shù)據(jù)架構(gòu)
實(shí)際上這一章是一個(gè)Angular高級(jí)編程的入口纽门,介紹了Angular數(shù)據(jù)架構(gòu)的幾種方式薛耻,這些不同的方式代表著解決問(wèn)題的不同思路:
第十、十一章介紹的是官方的可觀察者模式(Observable)赏陵,通過(guò)RxJS來(lái)實(shí)現(xiàn)饼齿。
第十二饲漾、十三章則介紹的是React上大火的Redux模式。?
鑒于本書的這幾章寫的已經(jīng)很詳細(xì)缕溉,筆者主要補(bǔ)充一些自己收集到的資料并談?wù)効捶ā?/p>
第十考传、十一章 使用可觀察對(duì)象的數(shù)據(jù)架構(gòu)
如果沒(méi)有接觸過(guò)響應(yīng)式編程(reactive programming),則你可能需要看看一些預(yù)備材料证鸥,比如《你不容錯(cuò)過(guò)的響應(yīng)式編程入門(中文版)》僚楞。
在異步數(shù)據(jù)處理方式上有很多種方式:回調(diào)、Promise枉层、Observable...
Callback對(duì)于寫JS的人來(lái)說(shuō)都不會(huì)陌生泉褐,Promise相比Callback在代碼可讀性和可維護(hù)性上都提高了不少,能夠避免回調(diào)陷阱鸟蜡。
Promise是ng1.x里主要采用的方法膜赃,下面談?wù)凱romise和Observable的區(qū)別:
Promise的特點(diǎn):(1)一次請(qǐng)求返回一個(gè)值;(2)不可被撤銷揉忘。
Observable的特點(diǎn):(1)隨著時(shí)間的推移可以使用多個(gè)值跳座;(2)可以被撤銷;(3)支持map泣矛、 filter,疲眷、reduce、forEach等操作符乳蓄。
那么是不是在Angular2/4中就一定要使用Observable呢?
這可不一定夕膀,還是要分使用場(chǎng)景的虚倒,如果你的數(shù)據(jù)就是需要發(fā)出一次請(qǐng)求獲得一個(gè)結(jié)果,依然可以用Promise产舞,其實(shí)我們很多情況下就是這種場(chǎng)景魂奥,我們只需要關(guān)心這個(gè)數(shù)據(jù)是獲取成功還是沒(méi)有成功就行了。關(guān)于這點(diǎn)可以參看這篇文章《Stop using observable when you should use a promise(該用promise的時(shí)候就別用observable)》易猫。
大部分時(shí)候耻煤,使用Promise 是更好地選擇,我們通常會(huì)用http.get()獲取單塊數(shù)據(jù)准颓。只要接收到數(shù)據(jù)哈蝇,就算完成。 使用Promise這種形式的結(jié)果是讓調(diào)用方更容易寫攘已,并且Promise已經(jīng)在 JavaScript 程序員中被廣泛接受了炮赦。
但是請(qǐng)求并非總是“一次性”的。我們可以開始一個(gè)請(qǐng)求样勃, 并且取消它吠勘,在服務(wù)器對(duì)第一個(gè)請(qǐng)求作出回應(yīng)之前性芬,再開始另一個(gè)不同的請(qǐng)求 。?
一個(gè)請(qǐng)求-取消-新請(qǐng)求的序列用Promise是很難實(shí)現(xiàn)的剧防,但是對(duì)Observable來(lái)說(shuō)則很容易植锉。
Observable適合用在數(shù)據(jù)以Stream(流式數(shù)據(jù))出現(xiàn)的實(shí)時(shí)應(yīng)用場(chǎng)景,比如聊天室峭拘、股票俊庇、游戲…… 在這些場(chǎng)景下,數(shù)據(jù)會(huì)從服務(wù)端源源不斷的推送過(guò)來(lái)棚唆,而用戶的響應(yīng)也隨時(shí)會(huì)改變所需要的數(shù)據(jù)和數(shù)據(jù)的展現(xiàn)形式暇赤,這個(gè)時(shí)候Observable的強(qiáng)大功能就發(fā)揮出來(lái)了。第十章的例子就是一個(gè)比較經(jīng)典的聊天室場(chǎng)景宵凌,如果寫個(gè)支持websocket的服務(wù)端鞋囊,那就是一個(gè)聊天室的雛形了;第十一章則是在視圖層面瞎惫,用組件(component)配合聊天數(shù)據(jù)的展現(xiàn)溜腐。
第十二、十三章 Angular 與 Redux
第十二章介紹了怎樣用TypeScript來(lái)寫Redux瓜喇,并且結(jié)合Angular實(shí)現(xiàn)了一個(gè)迷你計(jì)數(shù)器挺益。
第十三章則用Redux的方式把第十、十一章的聊天室程序重構(gòu)了一遍乘寒。
Redux的設(shè)計(jì)思想能在Angular中實(shí)現(xiàn)望众,表明Angular架構(gòu)具有很大的靈活性,實(shí)際上把React.JS和Angular2/4放在一起也沒(méi)有問(wèn)題伞辛,有興趣的可以參考ngReact項(xiàng)目烂翰。
第十四章 高級(jí)組件
組件(component)是Angular2/4的基石,事實(shí)上蚤氏,我們前面的每一個(gè)章節(jié)都離不開組件甘耿,而我們也可以利用Angular提供給我們的API根據(jù)需要去構(gòu)建更加復(fù)雜、漂亮竿滨、功能更加強(qiáng)大的高級(jí)組件佳恬,我們甚至可以自定義模版語(yǔ)法,比如像例子中的在“ngIf”的基礎(chǔ)上構(gòu)造出“ngBookIf”語(yǔ)法于游。
在這個(gè)方面 ionic 2/3 可以說(shuō)是非常經(jīng)典的例子毁葱,這是一套深度實(shí)踐并封裝了Angular 2/4的高級(jí)框架,特別適用于移動(dòng)開發(fā)贰剥。
Angular Material?項(xiàng)目則是Angular官方支持的以Material風(fēng)格定義的組件庫(kù)头谜。
如果要深入學(xué)習(xí)Angular高級(jí)組件開發(fā),還可以參考下面這本書?《Angular 2 Components》
第十五章 測(cè)試
驅(qū)動(dòng)測(cè)試開發(fā)(TDD)現(xiàn)在已經(jīng)是非常主流的開發(fā)方式了鸠澈,而且從產(chǎn)品角度出發(fā)柱告,為了提高代碼的質(zhì)量截驮,甚至很多開發(fā)者提倡測(cè)試要寫在開發(fā)的前面。
熟悉JS自動(dòng)測(cè)試的朋友一定很熟悉Jasmine和Karma這兩個(gè)工具际度。
Angular自身提供了一套基于Jasmine框架的輔助類葵袭,位于@angular/core/testing包當(dāng)中,我們照著書上一步步來(lái)就可以比較輕松的學(xué)習(xí)到Angular的測(cè)試流程乖菱。
Angular2/4在提供測(cè)試功能方面做了大量的工作坡锡,使得我們可以輕松地測(cè)試應(yīng)用程序的方方面面:從控制器到服務(wù)類、表單和HTTP窒所、異步代碼測(cè)試等等……鹉勒。
《Angular Test-Driven Development》此書深入介紹了用TDD的方式開發(fā)Angular,指導(dǎo)我們何時(shí)吵取,為什么以及如何應(yīng)用測(cè)試技術(shù)和最佳實(shí)踐來(lái)創(chuàng)建優(yōu)質(zhì)清潔代碼禽额。
第十六章 從Angular.JS 1.x 升級(jí)到 Angular 2/4
如果你已經(jīng)有Angular.JS 1.x 的項(xiàng)目,需要向Angular 2/4 過(guò)渡皮官,沒(méi)關(guān)系脯倒,Angular.JS 1.x 和Angular 2/4 的互操作性已經(jīng)相當(dāng)完善。
Angular提供了一種方式來(lái)啟動(dòng)你的Angular.JS 1.x應(yīng)用捺氢,然后在其中寫Angular的組件和服務(wù)藻丢。寫完Angular組件,只要把它和Angular.JS 1.x 組件混在一起就可以了摄乒。另外悠反,依賴注入體系也支持在Angular.JS和Angular之間雙向傳遞數(shù)據(jù),因此你寫的服務(wù)在AngularJS和Angular中都能運(yùn)行馍佑。
最后:
由于已經(jīng)拜讀過(guò)了ng book 2/4 的英文版斋否,所以此次我對(duì)中文版的閱讀速度其實(shí)是挺快的,在讀后感寫作過(guò)程中也添加了一些我個(gè)人收集的一些資料挤茄,希望對(duì)大家有所幫助如叼。在中文版閱讀過(guò)程中冰木,我著重注意英文版中一些比較難理解的地方在中文版里的翻譯情況穷劈,總體而言,我感覺(jué)翻譯的還是比較流暢自然的踊沸,這確實(shí)是一本譯者們注入了心血的大作歇终,所以在讀后感最后再次表示對(duì)他們的感謝?? ?,同時(shí)也感謝圖靈出了這么一本好書逼龟。????