本章我們學(xué)習(xí)了太多的實(shí)用的技能。
我們新建了多個(gè)攔截器,對(duì)攔截器的使用加深了印象。在實(shí)際的項(xiàng)目中,我們還可以結(jié)合攔截器來實(shí)現(xiàn)更多的功能。比如當(dāng)請(qǐng)求時(shí)間大于0.5S顯示一個(gè)Loading的加載動(dòng)畫;在比如將一些請(qǐng)求時(shí)間大于3S的請(qǐng)求記錄下來,然后默默地發(fā)送到我們的監(jiān)控系統(tǒng)上;再比如記錄一些請(qǐng)求發(fā)生異常情況,然后把異然發(fā)送到監(jiān)控系統(tǒng)上。
我們對(duì)父子組件的應(yīng)用有了更深入的認(rèn)識(shí),不但可以使用基本`@Output()`、`@Input()`來完成父子組件的交互,還知道了`@Input()`如果應(yīng)用變更檢測(cè)。
在MockApi方面,在開發(fā)過程中我們完成棄用了真正的后面,在僅使用的MockApi的情況下便完成了開發(fā)工作。這也是前后臺(tái)分離開發(fā)的核心,有了MockApi的存在,才使得前后臺(tái)在真正意義上進(jìn)行了分離。我們還學(xué)習(xí)了如何在MockApi中進(jìn)行數(shù)據(jù)驗(yàn)證,當(dāng)組件以**非法**數(shù)據(jù)發(fā)起請(qǐng)求時(shí),MockApi能夠?qū)崟r(shí)對(duì)這個(gè)非法數(shù)據(jù)做出提示,這使得在MockApi在單元測(cè)試的支持下更加的健壯。在生產(chǎn)項(xiàng)目中,我們也是這么做的。
在單元測(cè)試的支持下,我們也嘗試像大牛一樣完成了代碼的重構(gòu),進(jìn)而消滅了重復(fù)的輪子。代碼重構(gòu)是一種保障代碼質(zhì)量非常有效的方法,代碼重構(gòu)的前提是單元測(cè)試,重構(gòu)的目的降低項(xiàng)目維護(hù)難度。代碼重構(gòu)過程中,為了避免重構(gòu)對(duì)歷史的項(xiàng)目產(chǎn)生重大影響,重構(gòu)需要逐步推進(jìn),保證向下兼容。不然,重構(gòu)后的集成測(cè)試也是必不可少的環(huán)節(jié)。
在測(cè)試方面,我們使用了`MockApiTestingInterceptor`來替代了原有的`MockApiInterceptor`,這使得我們可以手動(dòng)控制模擬數(shù)據(jù)的發(fā)送時(shí)機(jī),結(jié)合手動(dòng)調(diào)用`detectChanges()`方法,達(dá)到了在單元測(cè)試中對(duì)組件狀況了然于胸的目的。這雖然在前期給我們?cè)斐闪艘欢ǖ呢?fù)擔(dān),但無疑對(duì)Angular的學(xué)習(xí)的貢獻(xiàn)是巨大的。因?yàn)槲覀儗W(xué)習(xí)Angular的過程中,便掌握了Angular渲染組件的多種內(nèi)部特性,這為我們以后參與生產(chǎn)項(xiàng)目積累了資本。
在表單方面,我們完全使用了面向?qū)ο蟮捻憫?yīng)式表單。這種可以使用面向?qū)ο蟮乃枷雽?duì)表單輸入進(jìn)行控制的思想實(shí)在是太棒了。在面向?qū)ο笏枷氲闹С窒拢覀兛梢杂^察表單項(xiàng)的數(shù)據(jù)變化,為表單項(xiàng)設(shè)置驗(yàn)證器。同時(shí),當(dāng)表單存在多個(gè)表單項(xiàng)時(shí),還可以將多個(gè)表單項(xiàng)組合在一起形成`FormGroup`,這使得表單驗(yàn)證變得極其簡(jiǎn)單。
本章我們還開發(fā)了一個(gè)應(yīng)用性不是特別廣的分頁(yè)組件。通過對(duì)該組件學(xué)習(xí),我們掌握了html代碼是如何一步步變更為Angular組件的。
我們學(xué)習(xí)了`ngClass`、`ngStyle`的使用方法,通過對(duì)兩者的對(duì)比,能夠發(fā)現(xiàn)Angular在處理此類問題上的通用的點(diǎn)。
我還學(xué)習(xí)了如何自定義FormControl,這也是生產(chǎn)環(huán)境中一個(gè)非常核心的內(nèi)容,將子組件打包為FormControl是非常實(shí)用的。這使得我們可以將整個(gè)V層的表單包裝為一個(gè)FormGroup,從而將整個(gè)表單做為整體進(jìn)行處理。在自定義FormControl時(shí),我們又接解了TypeScript的接口概念,學(xué)習(xí)了如何在組件是使用`providers`等。
在集成測(cè)試中,我們啟動(dòng)了惰性加載,通過代碼驗(yàn)證了惰性加載的時(shí)機(jī)。這也是一個(gè)生產(chǎn)項(xiàng)目中核心的知識(shí)點(diǎn)之一。在路由方面,我們學(xué)習(xí)了如何在V層及C層中完成相對(duì)路由的跳轉(zhuǎn)。
最后我們對(duì)單例的Service進(jìn)行了學(xué)習(xí),了解了root根模塊,對(duì)DI又有了新的認(rèn)識(shí)。
恭喜你,在成為優(yōu)秀的軟件工程師的路上又邁出了堅(jiān)實(shí)的一步!
- 序言
- 第一章 Hello World
- 1.1 環(huán)境安裝
- 1.2 Hello Angular
- 1.3 Hello World!
- 第二章 教師管理
- 2.1 教師列表
- 2.1.1 初始化原型
- 2.1.2 組件生命周期之初始化
- 2.1.3 ngFor
- 2.1.4 ngIf、ngTemplate
- 2.1.5 引用 Bootstrap
- 2.2 請(qǐng)求后臺(tái)數(shù)據(jù)
- 2.2.1 HttpClient
- 2.2.2 請(qǐng)求數(shù)據(jù)
- 2.2.3 模塊與依賴注入
- 2.2.4 異步與回調(diào)函數(shù)
- 2.2.5 集成測(cè)試
- 2.2.6 本章小節(jié)
- 2.3 新增教師
- 2.3.1 組件初始化
- 2.3.2 [(ngModel)]
- 2.3.3 對(duì)接后臺(tái)
- 2.3.4 路由
- 2.4 編輯教師
- 2.4.1 組件初始化
- 2.4.2 獲取路由參數(shù)
- 2.4.3 插值與模板表達(dá)式
- 2.4.4 初識(shí)泛型
- 2.4.5 更新教師
- 2.4.6 測(cè)試中的路由
- 2.5 刪除教師
- 2.6 收尾工作
- 2.6.1 RouterLink
- 2.6.2 fontawesome圖標(biāo)庫(kù)
- 2.6.3 firefox
- 2.7 總結(jié)
- 第三章 用戶登錄
- 3.1 初識(shí)單元測(cè)試
- 3.2 http概述
- 3.3 Basic access authentication
- 3.4 著陸組件
- 3.5 @Output
- 3.6 TypeScript 類
- 3.7 瀏覽器緩存
- 3.8 總結(jié)
- 第四章 個(gè)人中心
- 4.1 原型
- 4.2 管道
- 4.3 對(duì)接后臺(tái)
- 4.4 x-auth-token認(rèn)證
- 4.5 攔截器
- 4.6 小結(jié)
- 第五章 系統(tǒng)菜單
- 5.1 延遲及測(cè)試
- 5.2 手動(dòng)創(chuàng)建組件
- 5.3 隱藏測(cè)試信息
- 5.4 規(guī)劃路由
- 5.5 定義菜單
- 5.6 注銷
- 5.7 小結(jié)
- 第六章 班級(jí)管理
- 6.1 新增班級(jí)
- 6.1.1 組件初始化
- 6.1.2 MockApi 新建班級(jí)
- 6.1.3 ApiInterceptor
- 6.1.4 數(shù)據(jù)驗(yàn)證
- 6.1.5 教師選擇列表
- 6.1.6 MockApi 教師列表
- 6.1.7 代碼重構(gòu)
- 6.1.8 小結(jié)
- 6.2 教師列表組件
- 6.2.1 初始化
- 6.2.2 響應(yīng)式表單
- 6.2.3 getTestScheduler()
- 6.2.4 應(yīng)用組件
- 6.2.5 小結(jié)
- 6.3 班級(jí)列表
- 6.3.1 原型設(shè)計(jì)
- 6.3.2 初始化分頁(yè)
- 6.3.3 MockApi
- 6.3.4 靜態(tài)分頁(yè)
- 6.3.5 動(dòng)態(tài)分頁(yè)
- 6.3.6 @Input()
- 6.4 編輯班級(jí)
- 6.4.1 測(cè)試模塊
- 6.4.2 響應(yīng)式表單驗(yàn)證
- 6.4.3 @Input()
- 6.4.4 FormGroup
- 6.4.5 自定義FormControl
- 6.4.6 代碼重構(gòu)
- 6.4.7 小結(jié)
- 6.5 刪除班級(jí)
- 6.6 集成測(cè)試
- 6.6.1 惰性加載
- 6.6.2 API攔截器
- 6.6.3 路由與跳轉(zhuǎn)
- 6.6.4 ngStyle
- 6.7 初識(shí)Service
- 6.7.1 catchError
- 6.7.2 單例服務(wù)
- 6.7.3 單元測(cè)試
- 6.8 小結(jié)
- 第七章 學(xué)生管理
- 7.1 班級(jí)列表組件
- 7.2 新增學(xué)生
- 7.2.1 exports
- 7.2.2 自定義驗(yàn)證器
- 7.2.3 異步驗(yàn)證器
- 7.2.4 再識(shí)DI
- 7.2.5 屬性型指令
- 7.2.6 完成功能
- 7.2.7 小結(jié)
- 7.3 單元測(cè)試進(jìn)階
- 7.4 學(xué)生列表
- 7.4.1 JSON對(duì)象與對(duì)象
- 7.4.2 單元測(cè)試
- 7.4.3 分頁(yè)模塊
- 7.4.4 子組件測(cè)試
- 7.4.5 重構(gòu)分頁(yè)
- 7.5 刪除學(xué)生
- 7.5.1 第三方dialog
- 7.5.2 批量刪除
- 7.5.3 面向?qū)ο?/a>
- 7.6 集成測(cè)試
- 7.7 編輯學(xué)生
- 7.7.1 初始化
- 7.7.2 自定義provider
- 7.7.3 更新學(xué)生
- 7.7.4 集成測(cè)試
- 7.7.5 可訂閱的路由參數(shù)
- 7.7.6 小結(jié)
- 7.8 總結(jié)
- 第八章 其它
- 8.1 打包構(gòu)建
- 8.2 發(fā)布部署
- 第九章 總結(jié)