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

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