《Angular項(xiàng)目實(shí)戰(zhàn)》課件-CORE07

項(xiàng)目七--智慧工廠環(huá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)了解環(huán)安管理模塊動(dòng)畫效果實(shí)現(xiàn)流程學(xué)習(xí)Angular服務(wù)、動(dòng)畫的相關(guān)知識(shí)掌握HTTP服務(wù)的使用具有使用Angular服務(wù)實(shí)現(xiàn)數(shù)據(jù)傳輸?shù)哪芰W(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入在智慧工廠中央管理系統(tǒng)的制作過(guò)程中，路由管理和視圖加載具有一定的重要性，當(dāng)兩個(gè)視圖數(shù)據(jù)一致時(shí)，我們也許會(huì)把代碼一遍又一遍的復(fù)制，智慧工廠的開(kāi)發(fā)人員覺(jué)得這樣會(huì)很麻煩，所以他們使用服務(wù)提供一種能在應(yīng)用的整個(gè)生命周期內(nèi)保持和共享數(shù)據(jù)的方法，當(dāng)用到時(shí)只需把它注入到相應(yīng)的組件中。使用服務(wù)可以保持組件精簡(jiǎn)，使其集中精力為視圖提供支持。本項(xiàng)目主要講解Angular服務(wù)以及動(dòng)畫的應(yīng)用。功能描述功能描述使用Bootstrap+Angular實(shí)現(xiàn)智慧工廠環(huán)安管理模塊。使用Bootstrap相關(guān)知識(shí)設(shè)計(jì)智慧工廠環(huán)安管理模塊使用Angular動(dòng)畫實(shí)現(xiàn)界面動(dòng)態(tài)效果使用Angular服務(wù)實(shí)現(xiàn)數(shù)據(jù)傳輸企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實(shí)現(xiàn)效果實(shí)現(xiàn)效果PRESENT企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)技能任務(wù)技能任務(wù)技能01Angular服務(wù)概述02HTTP服務(wù)03Angular動(dòng)畫企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）Angular服務(wù)概述Angular服務(wù)是指能夠被其它的組件或者指令調(diào)用的、可共享的代碼塊，當(dāng)有組件需要時(shí)，通過(guò)依賴注入，將其注入到組件中。具有提高代碼的利用率，方便組件之間共享數(shù)據(jù)和方法，方便測(cè)試和維護(hù)等優(yōu)點(diǎn)01Angular服務(wù)概述企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）HTTP服務(wù)大多數(shù)前端應(yīng)用都需要通過(guò)HTTP協(xié)議與后端服務(wù)器進(jìn)行通訊。在前端開(kāi)發(fā)中，一般通過(guò)AJAX原生進(jìn)行服務(wù)器的訪問(wèn)，但在訪問(wèn)服務(wù)器時(shí)會(huì)發(fā)生跨域問(wèn)題，通過(guò)JSONP可以解決這一問(wèn)題。本項(xiàng)目主要講解的是Angular封裝好的AJAX（被HttpModule封裝的HTTP服務(wù)）進(jìn)行服務(wù)器的訪問(wèn)。HTTP服務(wù)企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）AJAX是使用XMLHttpRequest對(duì)象（支持同步和異步的方式發(fā)送請(qǐng)求，默認(rèn)用異步方式）向服務(wù)器請(qǐng)求并操作數(shù)據(jù)的一種通訊傳輸技術(shù)。01AJAX介紹企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）JSONP是用于解決主流瀏覽器的跨域訪問(wèn)數(shù)據(jù)的問(wèn)題。在Web開(kāi)發(fā)中，有時(shí)需要向與當(dāng)前頁(yè)面不同源（域名，協(xié)議，端口不相同）的服務(wù)器發(fā)送AJAX請(qǐng)求，這時(shí)就需要用到JSONP。其實(shí)現(xiàn)方式在客戶端聲明回調(diào)函數(shù)，通過(guò)GET方法向服務(wù)器跨域請(qǐng)求數(shù)據(jù)，然后服務(wù)端返回相應(yīng)的數(shù)據(jù)并動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)。02

JSONP介紹企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）相對(duì)于XMLHttpRequest，使用HttpModule也可以實(shí)現(xiàn)同樣的功能，而且更加簡(jiǎn)單，代碼更加簡(jiǎn)潔。HttpModule是用來(lái)封裝HTTP服務(wù)相關(guān)功能的模塊，該模塊不僅包含了HTTP服務(wù)，而且也包含了HTTP所依賴的其它服務(wù)03HttpModule

企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）Angular動(dòng)畫其實(shí)現(xiàn)首先需要安裝項(xiàng)目依賴包，然后引入BrowserAnimationsModule函數(shù)，最后使用動(dòng)畫觸發(fā)器（animationtriggers），來(lái)定義一系列狀態(tài)和過(guò)渡時(shí)間。01Angular動(dòng)畫企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）定義一個(gè)動(dòng)畫觸發(fā)器，需要用到trigger()方法，這個(gè)方法接受兩個(gè)參數(shù)（動(dòng)畫標(biāo)識(shí)符、多個(gè)狀態(tài)轉(zhuǎn)場(chǎng)的數(shù)組02動(dòng)畫觸發(fā)器的格式企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）trigger(‘triggerName’,[//定義的是每個(gè)狀態(tài)的最終樣式state(‘狀態(tài)名稱一’,style({CSS樣式})),state(‘狀態(tài)名稱二’,style({CSS樣式})),//定義的是狀態(tài)的轉(zhuǎn)場(chǎng)樣式transition(‘狀態(tài)名稱一=>狀態(tài)名稱二’,animate（過(guò)渡時(shí)間）),transition(‘狀態(tài)名稱二=>狀態(tài)名稱一’,animate（過(guò)渡時(shí)間）)])Anguar動(dòng)畫狀態(tài):（1）通配符狀態(tài)（2）void狀態(tài)Angular動(dòng)畫過(guò)渡時(shí)間:（1）持續(xù)時(shí)間（2）延遲（3）緩動(dòng)03動(dòng)畫觸發(fā)器的參數(shù)企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）（1）安裝動(dòng)畫依賴包（2）在AppModule.ts中引入BrowserAnimationsModule函數(shù)（3）新建動(dòng)畫文件，編寫動(dòng)畫觸發(fā)器（4）在組件ts里引入動(dòng)畫文件04如何使用Angular動(dòng)畫企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)實(shí)施任務(wù)實(shí)施第一步第二步第三步設(shè)置監(jiān)控組件。本組件主要分為尾氣風(fēng)機(jī)監(jiān)控、合成廢水報(bào)警、廢氣監(jiān)控三個(gè)模塊為監(jiān)控組件設(shè)置布局樣式，背景顏色以及更多信息按鈕樣式設(shè)置監(jiān)控詳情組件。實(shí)現(xiàn)監(jiān)控詳情組件的顯示與隱藏切換。企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)實(shí)施第四步第五步設(shè)置環(huán)安問(wèn)題列表和會(huì)話組件，環(huán)安問(wèn)題列表主要是顯示監(jiān)控出現(xiàn)的一些問(wèn)題，會(huì)話組件為最近聯(lián)系人的一些對(duì)話設(shè)置環(huán)安問(wèn)題列表和會(huì)話組件樣式，為該組件設(shè)置邊框、字體樣式等，并加上動(dòng)畫效果企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述本項(xiàng)目通過(guò)對(duì)智慧工廠環(huán)安管理模塊的學(xué)習(xí)，學(xué)習(xí)了Angu