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

JSONP介紹企業級卓越人才培養（信息類專業集群）相對于XMLHttpRequest，使用HttpModule也可以實現同樣的功能，而且更加簡單，代碼更加簡潔。HttpModule是用來封裝HTTP服務相關功能的模塊，該模塊不僅包含了HTTP服務，而且也包含了HTTP所依賴的其它服務03HttpModule

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