《Angular項(xiàng)目實(shí)戰(zhàn)》04 智慧工廠能源管理模塊寫(xiě)字字帖

項(xiàng)目四--智慧工廠能源管理模塊合作開(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í)Angular組件、指令掌握Angular生命周期鉤子具備搭建Angular模板視圖層的能力學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入在現(xiàn)代工業(yè)生產(chǎn)管理中，能源管理尤為突出，并且在工業(yè)生產(chǎn)中發(fā)揮著十分重要的作用。根據(jù)能源管理模塊能夠了解到當(dāng)今熱門的能源新聞，并可以對(duì)水能源和氣能源進(jìn)行報(bào)警監(jiān)控。本項(xiàng)目主要是通過(guò)實(shí)現(xiàn)智慧工廠的能源管理模塊來(lái)學(xué)習(xí)Angular的組件和指令。功能描述功能描述使用Bootstrap+Angular實(shí)現(xiàn)智慧工廠能源管理模塊。使用Bootstrap相關(guān)知識(shí)設(shè)計(jì)智慧工廠能源管理模塊使用Angular路由實(shí)現(xiàn)選項(xiàng)卡切換效果使用Angular內(nèi)置指令設(shè)置組件樣式企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實(shí)現(xiàn)效果實(shí)現(xiàn)效果PRESENT企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)技能任務(wù)技能任務(wù)技能01Angular生命周期鉤子02Angular組件企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）03Angular內(nèi)置指令04Angular自定義指令A(yù)ngular生命周期鉤子Angular提供了多種生命周期鉤子，但每種生命周期鉤子的調(diào)用順序及次數(shù)是不同的，其中ngOnInit()、ngAfterContentInit()、ngAfterViewInit()和ngOnDestroy()在生命周期中只會(huì)被調(diào)用一次，其它可被調(diào)用多次。在組件中，設(shè)置組件樣式有以下優(yōu)勢(shì)：支持CSS類名和選擇器，且支持當(dāng)前組件CSS類名和選擇器不會(huì)與應(yīng)用程序中其他類和選擇器相沖突應(yīng)用程序的其他地方無(wú)法修改組件樣式組件的CSS代碼、組件類、HTML代碼可以放在同一文件里隨時(shí)可以更改或刪除組件的CSS代碼組件添加樣式方式具有如下三種：通過(guò)設(shè)置styles或styleUrls元數(shù)據(jù)，注：兩者不能同時(shí)存在，當(dāng)同時(shí)存在時(shí)，styles中數(shù)據(jù)無(wú)作用。在HTML模板里定義style屬性通過(guò)link標(biāo)簽導(dǎo)入CSS文件Angular組件為了吸引更多的用戶，Angular提供了動(dòng)態(tài)組件，使項(xiàng)目在運(yùn)行期間不僅可以引入固定組件，還可以動(dòng)態(tài)加載組件。創(chuàng)建動(dòng)態(tài)組件步驟如下：第一步：指令標(biāo)記組件顯示位置第二步：加載組件第三步：解析組件第四步：創(chuàng)建公共接口第五步：組件調(diào)用接口Angular內(nèi)置指令NgClassNgClass指令主要作用是可以動(dòng)態(tài)設(shè)置和編輯給定元素的CSS類，通常在HTML模板中用ngClass表示。通過(guò)綁定ngClass指令，可以同時(shí)添加或移除多個(gè)類。NgStyleNgStyle指令的主要作用是可以使用動(dòng)態(tài)值給特定的DOM元素設(shè)定CSS屬性。在Angular中，使用NgStyle指令可同時(shí)設(shè)置多個(gè)內(nèi)聯(lián)樣式Angular自定義指令每個(gè)自定義屬性指令都需要一個(gè)控制器類，在實(shí)現(xiàn)屬性指令時(shí)，需通過(guò)@Directive裝飾器（聲明當(dāng)前類是一個(gè)指令）將元數(shù)據(jù)添加到控制器類上，控制器類則實(shí)現(xiàn)了指令所對(duì)應(yīng)的特定行為。在元數(shù)據(jù)中聲明selector屬性用以標(biāo)志指令的選擇對(duì)象。使用自定義指令步驟如下。第一步：創(chuàng)建自定義指令文件第二步：創(chuàng)建自定義指令第三步：在模塊中聲明第四步：在模板文件中引用指令A(yù)ngular自定義指令任務(wù)實(shí)施任務(wù)實(shí)施第一步第二步第三步路由配置。在導(dǎo)航組件中，使用路由，通過(guò)點(diǎn)擊，跳轉(zhuǎn)到相應(yīng)的頁(yè)面中監(jiān)控系統(tǒng)分為氣、水監(jiān)控，通過(guò)選項(xiàng)卡形式分別對(duì)兩個(gè)系統(tǒng)進(jìn)行監(jiān)控。監(jiān)控的數(shù)據(jù)通過(guò)NgFor指令雙向綁定顯示能源簡(jiǎn)介使用ul列表設(shè)置導(dǎo)航，通過(guò)點(diǎn)擊li元素進(jìn)行切換。通過(guò)員工登錄可以查看到員工哪一時(shí)刻登錄。企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述

本項(xiàng)目通過(guò)對(duì)智慧工廠能源管理模塊的學(xué)習(xí)，對(duì)能源管理模塊中各個(gè)組件的創(chuàng)建及所需功能具有進(jìn)一步了解，掌握