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