## 本章小節(jié)
有意識(shí)的對(duì)已學(xué)習(xí)的知識(shí)進(jìn)行回顧、總結(jié)、歸類是個(gè)非常好的習(xí)慣。在學(xué)習(xí)的過程中,所以的知識(shí)點(diǎn)被我們隨意的填充到了大腦這個(gè)廣闊的房間里,知識(shí)點(diǎn)東一塊、西一塊,這使得大腦不太容易記住他們。而對(duì)知識(shí)點(diǎn)的總結(jié)、歸類則相當(dāng)于把房間的東西歸整一遍,合并一下同類項(xiàng),找一下規(guī)則。這樣不但需要的存儲(chǔ)空間不大,而且當(dāng)我們想找某些知識(shí)點(diǎn)時(shí),也能夠非常輕松的找到他們。
## 組件
在生成標(biāo)準(zhǔn)組件時(shí),將生成以下四個(gè)文件:
- 負(fù)責(zé)功能及與其它服務(wù)交互的控制器`app.component.ts`,該文件以`component.ts`為后綴,是個(gè)標(biāo)準(zhǔn)的typescript類型文件。 ?
- 負(fù)責(zé)主體界面的V層文件`app.component.html`,該文件以`html`為后綴,是個(gè)標(biāo)準(zhǔn)的html文件。 ?
- 負(fù)責(zé)主體界面樣式的CSS文件`app.coponent.css`,該文件以`css`為后綴,是個(gè)標(biāo)準(zhǔn)的css文件。?
- 負(fù)責(zé)協(xié)助開發(fā)、測(cè)試的單元測(cè)試文件`app.component.spec.ts`,該文件以`spec.ts`為后綴,表示其為一個(gè)標(biāo)準(zhǔn)的單元測(cè)試文件;同時(shí)以`app.component`為前綴,表示其對(duì)應(yīng)測(cè)試的app組件。 ?
也就是說:其中前3個(gè)文件?構(gòu)成了一個(gè)標(biāo)準(zhǔn)的組件,而第4個(gè)文件?則是組件的輔助文件。也就是說:如果我們不計(jì)劃啟動(dòng)單元測(cè)試,則完全可以刪除以`spec.ts`結(jié)尾的測(cè)試文件。這不會(huì)對(duì)我們的系統(tǒng)應(yīng)用造成任何的影響。

所以當(dāng)我們?cè)偬岬侥硞€(gè)組件時(shí),就是指`xxx.component.ts` + `xxx.component.html` + `xxx.component.css`。
## 運(yùn)行組件
我們?cè)诒菊轮惺褂昧薫ng t`,`ng serve`來查看組件的運(yùn)行情況,是由于在Agnular中我們并無法單獨(dú)運(yùn)行某個(gè)組件。所以若要運(yùn)行組件,就必須將其放到某個(gè)**模塊(Module)**中。
在運(yùn)行`ng t`時(shí),`TestBed`為我們提供一個(gè)測(cè)試**模塊**,我們使用`declarations`將app組件放到了該**模塊**,該模塊雖然沒有被顯式的命名,但最后我們發(fā)現(xiàn)系統(tǒng)將命名為**DynamicTestModule**;在運(yùn)行`ng serve`時(shí),我們同樣使用`declarations`將app組件放到了AppModule中。無論是**DynamicTestModule**還是**AppModule**它的本質(zhì)都是模塊,只能把組件放到模塊中,才可以運(yùn)行它。
## 測(cè)試環(huán)境與開發(fā)環(huán)境
在發(fā)起數(shù)據(jù)請(qǐng)求時(shí),我們?cè)诒菊轮蟹謩e為測(cè)試與開發(fā)測(cè)試引入了提供`HttpClient`的`HttpClientModule`,這說明測(cè)試與開發(fā)是完全獨(dú)立的兩個(gè)模塊。即然是完全獨(dú)立,那么它們便互不影響,互相透明。在一個(gè)模塊中做的配置不會(huì)影響到另一個(gè)模塊,所以如果想讓某個(gè)配置在兩個(gè)模塊下分別生效時(shí),需要設(shè)置兩次。
當(dāng)使用`ng serve`時(shí),啟用了開發(fā)環(huán)境,此時(shí)App組件屬于App模塊;當(dāng)使用`ng t`時(shí),啟用了測(cè)試環(huán)境,此時(shí)App組件屬于動(dòng)態(tài)測(cè)試模塊。App模塊依賴于HttpClient,所以無論是開發(fā)環(huán)境還是測(cè)試環(huán)境,都需要在其啟動(dòng)的模塊中引入提供`HttpClient`的`HttpClientModule`,否則將引發(fā)依賴注入錯(cuò)誤異常。
當(dāng)然了,你可能還總結(jié)了更多知識(shí)點(diǎn),抽象出了這些點(diǎn)的共性。無論是理解對(duì)了還是錯(cuò)了,都將是我們當(dāng)前的收獲。只要自己總結(jié)的適用于當(dāng)前所學(xué),就是正確的學(xué)習(xí)方法。因?yàn)槿祟惖恼窃诓粩嗟淖C真、證偽中進(jìn)步的。
- 序言
- 第一章 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é)