《Angular項(xiàng)目實(shí)戰(zhàn)》05 智慧工廠水監(jiān)控模塊寫字字帖

項(xiàng)目五--智慧工廠水監(jiān)控模塊合作開(kāi)拓責(zé)任企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務(wù)實(shí)施任務(wù)需求任務(wù)總結(jié)03Optionhere04Optionhere任務(wù)技能任務(wù)需求任務(wù)需求學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解依賴注入概念學(xué)習(xí)提供器與注入器的相關(guān)知識(shí)掌握依賴注入、表單的應(yīng)用具有使用依賴注入為應(yīng)用注入服務(wù)的能力學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入數(shù)據(jù)的統(tǒng)計(jì)方式具有多種，為了更加直觀的顯示數(shù)據(jù)，該公司的開(kāi)發(fā)人員選擇了折線統(tǒng)計(jì)圖來(lái)實(shí)時(shí)監(jiān)控水資源數(shù)據(jù)，工作人員可以清晰看出各個(gè)時(shí)間段水壓數(shù)據(jù)的多少，這樣節(jié)省了大量的查詢時(shí)間，減少工作人員的工作量。本項(xiàng)目主要是通過(guò)實(shí)現(xiàn)智慧工廠的水監(jiān)控模塊來(lái)學(xué)習(xí)Angular的依賴注入。功能描述功能描述使用Bootstrap+Angular實(shí)現(xiàn)智慧工廠水監(jiān)控模塊。使用Bootstrap實(shí)現(xiàn)智慧工廠水監(jiān)控模塊通過(guò)Angular依賴注入來(lái)注入服務(wù)使用Chart.js繪制數(shù)據(jù)折線圖企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實(shí)現(xiàn)效果實(shí)現(xiàn)效果PRESENT企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)技能任務(wù)技能任務(wù)技能01Angular表單02依賴注入的介紹03依賴注入的應(yīng)用企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）Angular表單Angular團(tuán)隊(duì)對(duì)表單進(jìn)行了封裝擴(kuò)展，提供了模板驅(qū)動(dòng)、響應(yīng)式兩種方式構(gòu)建表單。使開(kāi)發(fā)者可以使用簡(jiǎn)潔的代碼來(lái)構(gòu)建功能強(qiáng)大的表單。01Angular表單企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）（1）NgForm指令是表單的控制中心，負(fù)責(zé)處理表單內(nèi)的業(yè)務(wù)邏輯（2）NgModel指令是實(shí)現(xiàn)表單控件數(shù)據(jù)綁定的核心（3）NgModelGroup指令是多個(gè)ngModel的集合，用于區(qū)分不同類型的表單控件02表單中的指令企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）NgModel指令不僅能追蹤表單控件的狀態(tài)，還可使用對(duì)應(yīng)的CSS狀態(tài)類來(lái)表示表單控件的狀態(tài)03表單樣式企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）Angular提供了內(nèi)置校驗(yàn)和自定義校驗(yàn)兩種方式。（1）表單內(nèi)置校驗(yàn)（2）自定義驗(yàn)證器04表單驗(yàn)證企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）依賴注入的介紹依賴注入的核心概念包括注入器(Injector)、提供器（Provider）、依賴（Denpendence）：注入器：提供了一系列的接口用于創(chuàng)建依賴對(duì)象的實(shí)例。其實(shí)現(xiàn)方法就是在構(gòu)造函數(shù)中聲明提供器：它用于配置注入器。其實(shí)現(xiàn)方法是在Provider通過(guò)注入器提供的令牌創(chuàng)建被依賴的對(duì)象依賴：指定了被依賴對(duì)象的類型，注入器會(huì)根據(jù)此類型創(chuàng)建對(duì)應(yīng)的對(duì)象依賴注入的介紹企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）注入器負(fù)責(zé)注入組件需要的對(duì)象，一般注入器會(huì)自動(dòng)通過(guò)組件的構(gòu)造函數(shù)，將組件所需的對(duì)象注入到組件中。01注入器企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）constructor(private對(duì)象:類型){}//示例代碼constructor(privateprojectServie:ProjectService){}提供器（Provider）描述初始化標(biāo)（Token）所對(duì)應(yīng)的依賴服務(wù)，最終被注入到組件或服務(wù)中使用。（1）在模塊（如：根模塊）中聲明提供器（2）在組件中聲明提供器02提供器企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）（1）新建服務(wù)（2）在組件構(gòu)造函數(shù)中聲明服務(wù)（3）在組件中配置注入器（4）通過(guò)import導(dǎo)入被依賴的對(duì)象服務(wù)01在組件中注入服務(wù)企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）依賴注入的應(yīng)用除了組件依賴服務(wù)，服務(wù)間依賴也很常見(jiàn)。如：在上面提到的AppService服務(wù)中，如果希望在異常時(shí)記錄錯(cuò)誤信息，則創(chuàng)建一個(gè)記錄錯(cuò)誤的服務(wù)，并把其注入在AppService服務(wù)中。02在服務(wù)中注入服務(wù)企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）不同的模塊中注入的服務(wù)在整個(gè)組件中都是可用的，這樣增強(qiáng)了模塊的擴(kuò)展性。（1）在兩個(gè)模塊中使用同樣的Token注入服務(wù)時(shí)，后初始化的模塊服務(wù)會(huì)覆蓋前面初始化的模塊服務(wù)（2）在根模塊中注入的服務(wù)擁有最高優(yōu)先級(jí)03在模塊中注入服務(wù)企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)實(shí)施任務(wù)實(shí)施第一步第二步第三步編寫頭部圖標(biāo)。頭部圖標(biāo)主要是對(duì)水質(zhì)、水位的顯示安裝圖表環(huán)境，在app.moudle.ts文件中引入ChartsModule。編寫底部水壓監(jiān)控圖組件，設(shè)置圖表的類型、x軸數(shù)據(jù)、圖表選項(xiàng)等新建JSON文件，聲明一個(gè)類并定義兩個(gè)變量；新建服務(wù)文件,引入JSON文件，使用Http.get()方法獲取URL地址中的數(shù)據(jù)企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)實(shí)施第四步第五步設(shè)置水壓監(jiān)控圖組件大小、標(biāo)題背景為綠色等編寫簡(jiǎn)介部分。使用柵格系統(tǒng)布局，分為左側(cè)文字簡(jiǎn)介以及右側(cè)圖片部分企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述通過(guò)對(duì)智慧工廠水監(jiān)控模塊的學(xué)習(xí)