Angular權(quán)威教程 讀后感(下)@阿貍不歌

Angular權(quán)威教程 讀后感(上)

第六章 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路由一書。

圖5 Angular Router

第八章 依賴注入

依賴注入(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 依賴注入的組成過(guò)程

如圖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

圖7 Angular 組件開發(fā)

第十五章 測(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ì)清潔代碼禽额。

圖8 Angular 驅(qū)動(dòng)測(cè)試開發(fā)

第十六章 從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í)也感謝圖靈出了這么一本好書逼龟。????



最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末评凝,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子腺律,更是在濱河造成了極大的恐慌奕短,老刑警劉巖宜肉,帶你破解...
    沈念sama閱讀 223,207評(píng)論 6 521
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異翎碑,居然都是意外死亡谬返,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,455評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門日杈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)遣铝,“玉大人,你說(shuō)我怎么就攤上這事莉擒「ㄔ福” “怎么了锯梁?”我有些...
    開封第一講書人閱讀 170,031評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我颠区,道長(zhǎng),這世上最難降的妖魔是什么掷漱? 我笑而不...
    開封第一講書人閱讀 60,334評(píng)論 1 300
  • 正文 為了忘掉前任秦士,我火速辦了婚禮,結(jié)果婚禮上栓辜,老公的妹妹穿的比我還像新娘恋拍。我一直安慰自己,他們只是感情好藕甩,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,322評(píng)論 6 398
  • 文/花漫 我一把揭開白布施敢。 她就那樣靜靜地躺著,像睡著了一般狭莱。 火紅的嫁衣襯著肌膚如雪僵娃。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,895評(píng)論 1 314
  • 那天腋妙,我揣著相機(jī)與錄音默怨,去河邊找鬼。 笑死骤素,一個(gè)胖子當(dāng)著我的面吹牛匙睹,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播济竹,決...
    沈念sama閱讀 41,300評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼痕檬,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了送浊?” 一聲冷哼從身側(cè)響起梦谜,我...
    開封第一講書人閱讀 40,264評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后唁桩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體闭树,經(jīng)...
    沈念sama閱讀 46,784評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,870評(píng)論 3 343
  • 正文 我和宋清朗相戀三年荒澡,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蔼啦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,989評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡仰猖,死狀恐怖捏肢,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情饥侵,我是刑警寧澤鸵赫,帶...
    沈念sama閱讀 36,649評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站躏升,受9級(jí)特大地震影響辩棒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜膨疏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,331評(píng)論 3 336
  • 文/蒙蒙 一一睁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧佃却,春花似錦者吁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,814評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至灶泵,卻和暖如春育八,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背赦邻。 一陣腳步聲響...
    開封第一講書人閱讀 33,940評(píng)論 1 275
  • 我被黑心中介騙來(lái)泰國(guó)打工髓棋, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人惶洲。 一個(gè)月前我還...
    沈念sama閱讀 49,452評(píng)論 3 379
  • 正文 我出身青樓按声,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親湃鹊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子儒喊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,995評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容