項目一--初識Angular合作開拓責(zé)任企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務(wù)實施任務(wù)需求任務(wù)總結(jié)03Optionhere04Optionhere任務(wù)技能任務(wù)需求任務(wù)需求學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解登錄功能的實現(xiàn)流程學(xué)習(xí)Angular環(huán)境的搭建掌握Angular項目的創(chuàng)建具備創(chuàng)建Angular項目的能力學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入在工業(yè)生產(chǎn)中，會產(chǎn)生大量的數(shù)據(jù)，工作人員需要對數(shù)據(jù)進(jìn)行監(jiān)控和整理，但是，通過人力來監(jiān)控和整理數(shù)據(jù)會花費很多的時間與精力。因此，某公司開發(fā)了一個可以分析、監(jiān)控數(shù)據(jù)的系統(tǒng)，此系統(tǒng)主要應(yīng)用于工業(yè)生產(chǎn)中，能快速的分析、整理數(shù)據(jù)，可以提高工作效率，降低生產(chǎn)成本。于是該公司給此系統(tǒng)命名為：“智慧工廠中央管理系統(tǒng)”，簡稱“智慧工廠”。本項目主要是通過實現(xiàn)智慧工廠登錄模塊來學(xué)習(xí)Angular的環(huán)境搭建及項目創(chuàng)建。功能描述功能描述通過Bootstrap+Angular實現(xiàn)智慧工廠登錄模塊。使用Bootstrap設(shè)計智慧工廠登錄模塊使用表單實現(xiàn)用戶名、密碼的輸入使用Angular路由實現(xiàn)登錄跳轉(zhuǎn)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實現(xiàn)效果實現(xiàn)效果PRESENT企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)技能任務(wù)技能任務(wù)技能01智慧工廠中央管理系統(tǒng)概述02Angular概述03Angular環(huán)境搭建04Angular項目結(jié)構(gòu)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）智慧工廠中央管理系統(tǒng)概述智慧工廠中央管理系統(tǒng)能夠提高工廠生產(chǎn)過程的可控性，減少生產(chǎn)線上人工的干預(yù)，及時正確地采集生產(chǎn)線數(shù)據(jù)，提高企業(yè)工作效率和生產(chǎn)能力。01智慧工廠中央管理系統(tǒng)項目背景企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）數(shù)據(jù)采集（2）采集數(shù)據(jù)的分析與處理（3）采集數(shù)據(jù)的輸出02智慧工廠中央管理系統(tǒng)的功能企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）圖表形式展現(xiàn)數(shù)據(jù)可以更直觀的反應(yīng)問題（2）分析預(yù)警值，做出優(yōu)化處理使被監(jiān)控設(shè)備達(dá)到高效率的工作03智慧工廠中央管理系統(tǒng)的優(yōu)勢企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular概述Angular的出現(xiàn)解決了使用靜態(tài)網(wǎng)頁技術(shù)構(gòu)建Web應(yīng)用的不足，讓瀏覽器能夠顯示出更多想要的效果。Angular和AngularJS的區(qū)別如下：解決了AngularJS的架構(gòu)限制問題和提升相關(guān)的性能在快速變化的Web時代，Angular支持更多的組件，并添加一些針對于移動應(yīng)用的新特性Angular比之前的版本開發(fā)接口更簡單不再有Controller和Scope引入了

RxJS

與

Observable引入了

Zone.js，提供更加智能的變化檢測Angular概述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular環(huán)境搭建（1）下載安裝包在Node.js官網(wǎng)下載安裝包，官網(wǎng)地址為：/en/（2）安裝Node.js雙擊打開nodejs.exe安裝文件進(jìn)行安裝（3）檢測Node.js是否安裝成功打開命令窗口，輸入node-v顯示當(dāng)前版本號，表示安裝成功01Node.js安裝企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）新建文件夾在nodejs下建立node_global、node_cache兩個文件夾（2）改變npm的啟動和緩存位置通過cmd打開命令窗口輸入npm

config

set

prefix、npm

config

set

cache

兩個命令（3）配置環(huán)境變量新建系統(tǒng)變量，變量名為：NODE_PAT；變量值為：nodejs文件安裝目錄02NodePackageManager企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基于AngularCLI（1）在project文件夾打開命令窗口（2）使用npm

install-g@Angular/cli命令安裝AngularCLI（3）使用ng--version檢測是否安裝成功03Angular安裝企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）app目錄包含應(yīng)用的組件和模塊，在開發(fā)項目中所有的編碼都在該文件下；assets是存儲靜態(tài)資源；index.html程序啟動時訪問該界面；main.ts整個項目的入口點，Angular通過這個文件來啟動項目；styles.css主要是放置全局的樣式；tsconfig.app.json主要配置TypeScript。Augular項目結(jié)構(gòu)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)實施任務(wù)實施第一步第二步第三步將登錄界面分成左邊和右邊兩部分，通過命令創(chuàng)建主組件以及左側(cè)標(biāo)題和右側(cè)表單輸入組件設(shè)置左側(cè)標(biāo)題內(nèi)容，通過h2標(biāo)簽設(shè)置智慧工廠中央管理系統(tǒng)的標(biāo)題使用表單設(shè)置用戶名、密碼輸入，在form標(biāo)簽中創(chuàng)建doLogin()方法，通過[disabled]設(shè)置登錄按鈕禁用效果企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述

本項目通過對智慧工廠中央管理系統(tǒng)登錄功能的學(xué)習(xí)，對Angular的作用及發(fā)展具有初步了解，能夠使用不同方式搭建Angular環(huán)境并掌握Angular項目結(jié)構(gòu)，能夠獨自使用Angular對界面進(jìn)行布局和優(yōu)化。延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)Thanks項目二--智慧工廠主界面合作開拓責(zé)任企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務(wù)實施任務(wù)需求任務(wù)總結(jié)03Optionhere04Optionhere任務(wù)技能任務(wù)需求任務(wù)需求學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解智慧工廠項目的基本布局學(xué)習(xí)TypeScript概述、安裝掌握TypeScript內(nèi)置類型具備使用函數(shù)和類的能力學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入智慧工廠中央管理系的主界面是一個軟件系統(tǒng)的窗口，簡潔美觀的界面可以給用戶帶來一種視覺享受，增加用戶對軟件的喜愛程度，于是開發(fā)人員與大家分享如何做出美觀、大方的界面。通過該界面，詳細(xì)的介紹了公司的企業(yè)文化與管理方針，優(yōu)美的布局給人眼前一亮。而且使用了TypeScript語言，在一定程度上提高了項目的性能。本項目主要是通過實現(xiàn)智慧工廠主界面來學(xué)習(xí)TypeScript內(nèi)置類型和類。功能描述功能描述使用Bootstrap+Angular實現(xiàn)智慧工廠主界面

使用Bootstrap實現(xiàn)界面布局使用TypeScript實現(xiàn)左側(cè)菜單選中狀態(tài)使用Angular創(chuàng)建組件企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實現(xiàn)效果實現(xiàn)效果PRESENT企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)技能任務(wù)技能任務(wù)技能01TypeScript概述02TypeScript內(nèi)置類型03函數(shù)04類企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）TypeScript概述TypeScript概述TypeScript是JavaScript的超集（擴(kuò)展了JavaScript語句），其本質(zhì)是向JavaScript添加了靜態(tài)類型（聲明數(shù)據(jù)類型）和基于類的面向?qū)ο缶幊蹋ㄈ鐚傩?、方法、繼承等）。具有協(xié)同開發(fā)，提高效率等優(yōu)點。TypeScript主要特點包括：增加了可選類型、類和模塊可編譯成可讀的、標(biāo)準(zhǔn)的JavaScript支持開發(fā)大規(guī)模JavaScript應(yīng)用用于開發(fā)大型應(yīng)用，并保證編譯后的JavaScript代碼兼容性文件擴(kuò)展名為.ts，通過編輯器可編譯成.js文件可以更加方便的調(diào)試項目TypeScript安裝使用TypeScript語言之前，需要通過Node.js包管理器進(jìn)行安裝，安裝步驟如下所示：第一步：安裝Node.js（詳見項目一）第二步：通過Node.js的npm安裝TypeScript

當(dāng)安裝完成后，在命令窗口輸入tsc–v進(jìn)行安裝檢驗，如果出現(xiàn)圖所示，則表示安裝成功。TypeScript內(nèi)置類型屬性值只能為true或false。letstu:boolean=false;TypeScript中包含的數(shù)字均屬于Number類型。letid:number=9;letFloor_nub:number=0b1010;實現(xiàn)方式是通過雙引號或單引號將字符串值進(jìn)行包裹。letname:string="Michelle";name="James";布爾類型數(shù)字類型字符串類型（1）通過在已知元素類型后添加“[]”定義一個數(shù)組。lettest:number[]=[2,7,9];（2）通過Array<元素類型>定義數(shù)組。lettest:Array<number>=[2,7,9];作為整型常數(shù)的集合被使用。enumColor{Red,Blue,Yellow};letc:Color=Color.Blue;可以使不確定數(shù)據(jù)類型的變量值直接通過編譯階段的檢查lettestAny:any=9;testAny="ThisisAngular!";testAny=false;數(shù)組枚舉任意值函數(shù)函數(shù)是可以從其它地方調(diào)用執(zhí)行的語句塊，具有代碼清晰易懂，便于維護(hù)等優(yōu)點。使用TypeScript可以創(chuàng)建多種類型的函數(shù)，其主要有無參函數(shù)、有參函數(shù)和匿名函數(shù)。函數(shù)定義企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）當(dāng)函數(shù)被調(diào)用時，編譯器會檢查每個參數(shù)是否都有提供值，傳遞給函數(shù)的參數(shù)個數(shù)必須與函數(shù)期望的參數(shù)個數(shù)相匹配。（1）當(dāng)不確定傳入某一類型參數(shù)時，可通過在參數(shù)后面加入“?”符號，使該參數(shù)變?yōu)榭蛇x參數(shù)（2）當(dāng)用戶未提供參數(shù)時，可根據(jù)需要為該參數(shù)設(shè)置默認(rèn)值01可選參數(shù)和默認(rèn)參數(shù)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）當(dāng)多個參數(shù)同時存在時，可以創(chuàng)建一個變量（省略號（...）后面為變量名），將同一類型參數(shù)包裹起來，最終形成剩余函數(shù)。02剩余參數(shù)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03this參數(shù)在使用this時，需要創(chuàng)建一個方法，使參數(shù)對象綁定到this上。并使用箭頭函數(shù)，使this指向參數(shù)對象重載是指在同一個類中，函數(shù)或方法名稱相同，其參數(shù)類型、類型順序、參數(shù)個數(shù)不同，且與返回值無關(guān)。目的是用相同的方法名實現(xiàn)類似的功能。在TypeScript中，重載的主要作用是根據(jù)傳入不同的參數(shù)返回不同類型的數(shù)據(jù)，方便函數(shù)的調(diào)用與返回。04重載企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）類1324屬性在面向?qū)ο螅惖膶嵗┓椒ㄖ?，表示對象相關(guān)特征的數(shù)據(jù)稱為對象的屬性。方法要想調(diào)用方法，首先要有該對象的實例（可通過new創(chuàng)建實例），然后在類對象實例的上下文中可以定義方法構(gòu)造函數(shù)構(gòu)造函數(shù)（constructor）是在類進(jìn)行實例化時執(zhí)行的特殊函數(shù)繼承主要作用是子類通過繼承（用extends關(guān)鍵字實現(xiàn)）獲取父類的行為，最終，可在子類中重寫、修改以及添加行為任務(wù)實施任務(wù)實施第一步第二步第三步設(shè)置頭部內(nèi)容。使用Bootstrap設(shè)計布局與樣式在ponent.html文件中對各個組件進(jìn)行布局，設(shè)置組件的渲染位置，并設(shè)計左側(cè)導(dǎo)航菜單設(shè)置輪播圖、主體內(nèi)容組件，數(shù)據(jù)顯示采用NgFor指令遍歷循環(huán)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述

本項目通過對智慧工廠主界面模塊的學(xué)習(xí)，對TypeScript的基本知識具有初步了解，學(xué)會如何使用內(nèi)置類型在編譯時執(zhí)行類型檢查。能夠使用函數(shù)定義執(zhí)行內(nèi)容的位置，了解TypeScript類的屬性及方法等。為以后編寫Angular項目打好基礎(chǔ)。延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)Thanks項目三--智慧工廠人員檔案模塊合作開拓責(zé)任企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務(wù)實施任務(wù)需求任務(wù)總結(jié)03Optionhere04Optionhere任務(wù)技能任務(wù)需求任務(wù)需求學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解人員檔案模塊的數(shù)據(jù)顯示學(xué)習(xí)Angular的模板語法掌握Angular的NgFor指令具有解決數(shù)據(jù)顯示問題的能力學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入在智慧工廠中央管理系統(tǒng)中，為了實現(xiàn)員工的精細(xì)化管理，建立了人員檔案模塊，在該模塊中系統(tǒng)管理員可以查看員工姓名、級別、簡介等相關(guān)信息。而且，系統(tǒng)管理員也可將優(yōu)秀員工的信息以輪播圖的形式顯示。本項目主要是通過實現(xiàn)智慧工廠的人員檔案模塊來學(xué)習(xí)Angular的模板語法和數(shù)據(jù)顯示。功能描述功能描述使用Bootstrap+Angular實現(xiàn)智慧工廠人員檔案模塊。使用Angular模板語法創(chuàng)建項目模板使用Bootstrap實現(xiàn)頁面布局使用Angular的NgFor指令實現(xiàn)數(shù)據(jù)顯示企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實現(xiàn)效果實現(xiàn)效果PRESENT企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)技能任務(wù)技能任務(wù)技能01Angular架構(gòu)02Angular模板語法企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03Angular數(shù)據(jù)顯示Angular架構(gòu)01模塊Angular應(yīng)用是模塊化的，每個應(yīng)用中至少含有一個模塊，即根模塊。模塊的主要作用是對組件與服務(wù)等進(jìn)行打包，形成內(nèi)聚的功能塊。02組件界面中的視圖區(qū)域是由組件組成的，通過在組件中編寫HTML模板，最終在界面中被渲染。在組件的ts文件中還可定義應(yīng)用邏輯等。03模板Angular模板一般以HTML形式存在，通過組件自身所含有的模板可以定義組件視圖。其主要作用是定義如何渲染組件。04元數(shù)據(jù)在創(chuàng)建組件后，對應(yīng)的ts文件中會自動生成一個@Component裝飾器，其包含多個配置項，這些配置項的值即為元數(shù)據(jù)。元數(shù)據(jù)的主要作用是渲染組件并執(zhí)行組件的邏輯。05數(shù)據(jù)綁定數(shù)據(jù)綁定可以使模板和組件之間相互關(guān)聯(lián)，相互合作。通過在模板HTML中綁定標(biāo)記，可以實現(xiàn)數(shù)據(jù)綁定。06指令指令可以為模板元素添加一些新的功能或特性。Angular中指令具有三種類型：組件、結(jié)構(gòu)型指令、屬性型指令。07服務(wù)服務(wù)可以是類，也可以是對象或者方法。其主要用來在特性模塊或者應(yīng)用中共享數(shù)據(jù)和方法。將服務(wù)注入到最高層的組件或模塊中，其子組件或子模塊也可應(yīng)用。08依賴注入通過依賴注入可以提供類的新實例，并負(fù)責(zé)處理類所需的全部依賴，其主要作用是將服務(wù)注入到需要的模塊、組件或服務(wù)中。Angular模板語法模板的HTML語法豐富多樣，與Angular結(jié)合使用克服了其在構(gòu)建應(yīng)用上的不足。Angular模板語法中兼容大部分HTML元素，不兼容HTML的元素有：<script>、<html>、<body>和<base>等01HTML語法企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）在編程代碼中，雙花括號{{…}}中的內(nèi)容即為模板表達(dá)式。主要作用是進(jìn)行運算并顯示其結(jié)果。具有以下特點：（1）沒有副作用（2）執(zhí)行迅速（3）應(yīng)用簡單（4）冪等性02模板表達(dá)式企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）03綁定語法通過綁定語法可以協(xié)調(diào)用戶所見視圖和應(yīng)用數(shù)據(jù)（數(shù)據(jù)源）交互。Angular提供多種數(shù)據(jù)綁定，其根據(jù)數(shù)據(jù)流可分為三種：從數(shù)據(jù)源到視圖、從視圖到數(shù)據(jù)源、從視圖到數(shù)據(jù)源再到視圖。模板引用變量的主要作用是用來引用模板中的某個DOM元素、指令等，其常用的語法為使用“#”聲明變量（或用ref-前綴代替#）。這些變量可以提供在模塊中直接訪問元素的能力。02模板引用變量企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）管道操作符（|）管道是一個接收輸入值并返回轉(zhuǎn)換結(jié)果的函數(shù)（2）安全導(dǎo)航操作符

(?.)用來保護(hù)出現(xiàn)在屬性路徑中的null和undefined值（3）非空斷言操作符（!）非空斷言操作符不會防止出現(xiàn)null或undefined03模板表達(dá)式操作符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular數(shù)據(jù)顯示01Optionhere02Optionhere03Optionhere04Optionhere插值表達(dá)式數(shù)據(jù)顯示的最基本方式是使用插值表達(dá)式綁定組件的屬性名。其語法結(jié)構(gòu)是：{{+（組件屬性名（表達(dá)式））+}}。NgForNgFor的主要作用是可以循環(huán)的從數(shù)組中取值并顯示出來，類似于for循環(huán)。NgIfNgIf的主要作用是根據(jù)提供的條件決定是否顯示或隱藏這個元素，使用時需將NgIf綁定到元素上。NgSwitchNgSwitch的主要作用是從多個元素中根據(jù)switch條件來選取某一個（或多個）。任務(wù)實施任務(wù)實施第一步第二步第三步設(shè)置人員信息，通過NgFor指令遍歷循環(huán)數(shù)據(jù)設(shè)置優(yōu)秀團(tuán)隊，將優(yōu)秀的團(tuán)隊成員展現(xiàn)出來設(shè)置優(yōu)秀員工工作，將優(yōu)秀員工的工作情況以文字的形式顯示企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述

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

本項目通過對智慧工廠能源管理模塊的學(xué)習(xí)，對能源管理模塊中各個組件的創(chuàng)建及所需功能具有進(jìn)一步了解，掌握組件與指令生命周期鉤子的使用方法及順序，具有獨立創(chuàng)建動態(tài)組件的能力，了解如何運用指令擴(kuò)展瀏覽器的功能，為以后實現(xiàn)各個功能打下基礎(chǔ)。延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)Thanks項目五--智慧工廠水監(jiān)控模塊合作開拓責(zé)任企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務(wù)實施任務(wù)需求任務(wù)總結(jié)03Optionhere04Optionhere任務(wù)技能任務(wù)需求任務(wù)需求學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解依賴注入概念學(xué)習(xí)提供器與注入器的相關(guān)知識掌握依賴注入、表單的應(yīng)用具有使用依賴注入為應(yīng)用注入服務(wù)的能力學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入數(shù)據(jù)的統(tǒng)計方式具有多種，為了更加直觀的顯示數(shù)據(jù)，該公司的開發(fā)人員選擇了折線統(tǒng)計圖來實時監(jiān)控水資源數(shù)據(jù)，工作人員可以清晰看出各個時間段水壓數(shù)據(jù)的多少，這樣節(jié)省了大量的查詢時間，減少工作人員的工作量。本項目主要是通過實現(xiàn)智慧工廠的水監(jiān)控模塊來學(xué)習(xí)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īng)用企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular表單Angular團(tuán)隊對表單進(jìn)行了封裝擴(kuò)展，提供了模板驅(qū)動、響應(yīng)式兩種方式構(gòu)建表單。使開發(fā)者可以使用簡潔的代碼來構(gòu)建功能強(qiáng)大的表單。01Angular表單企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）NgForm指令是表單的控制中心，負(fù)責(zé)處理表單內(nèi)的業(yè)務(wù)邏輯（2）NgModel指令是實現(xiàn)表單控件數(shù)據(jù)綁定的核心（3）NgModelGroup指令是多個ngModel的集合，用于區(qū)分不同類型的表單控件02表單中的指令企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）NgModel指令不僅能追蹤表單控件的狀態(tài)，還可使用對應(yīng)的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īng)的對象依賴注入的介紹企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）注入器負(fù)責(zé)注入組件需要的對象，一般注入器會自動通過組件的構(gòu)造函數(shù)，將組件所需的對象注入到組件中。01注入器企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）constructor(private對象:類型){}//示例代碼constructor(privateprojectServie:ProjectService){}提供器（Provider）描述初始化標(biāo)（Token）所對應(yīng)的依賴服務(wù)，最終被注入到組件或服務(wù)中使用。（1）在模塊（如：根模塊）中聲明提供器（2）在組件中聲明提供器02提供器企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）新建服務(wù)（2）在組件構(gòu)造函數(shù)中聲明服務(wù)（3）在組件中配置注入器（4）通過import導(dǎo)入被依賴的對象服務(wù)01在組件中注入服務(wù)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）依賴注入的應(yīng)用除了組件依賴服務(wù)，服務(wù)間依賴也很常見。如：在上面提到的AppService服務(wù)中，如果希望在異常時記錄錯誤信息，則創(chuàng)建一個記錄錯誤的服務(wù)，并把其注入在AppService服務(wù)中。02在服務(wù)中注入服務(wù)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）不同的模塊中注入的服務(wù)在整個組件中都是可用的，這樣增強(qiáng)了模塊的擴(kuò)展性。（1）在兩個模塊中使用同樣的Token注入服務(wù)時，后初始化的模塊服務(wù)會覆蓋前面初始化的模塊服務(wù)（2）在根模塊中注入的服務(wù)擁有最高優(yōu)先級03在模塊中注入服務(wù)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)實施任務(wù)實施第一步第二步第三步編寫頭部圖標(biāo)。頭部圖標(biāo)主要是對水質(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)控圖組件大小、標(biāo)題背景為綠色等編寫簡介部分。使用柵格系統(tǒng)布局，分為左側(cè)文字簡介以及右側(cè)圖片部分企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述通過對智慧工廠水監(jiān)控模塊的學(xué)習(xí)，對水監(jiān)控模塊中依賴注入等所需知識具有初步了解，掌握提供器與注入器的使用方法。了解注入器作用域規(guī)則，具有在組件、服務(wù)等中使用依賴注入的能力。為不同組件中注入服務(wù)打好基礎(chǔ)。延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)Thanks項目六--智慧工廠氣報表模塊合作開拓責(zé)任企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務(wù)實施任務(wù)需求任務(wù)總結(jié)03Optionhere04Optionhere任務(wù)技能任務(wù)需求任務(wù)需求學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解氣報表模塊的開發(fā)流程學(xué)習(xí)氣報表模塊所需路由知識掌握Angular路由配置具有使用Angular路由實現(xiàn)頁面跳轉(zhuǎn)的能力學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入為了能夠更加方便、快捷的統(tǒng)計氣體質(zhì)量數(shù)據(jù)，智慧工廠項目設(shè)計了氣報表模塊，氣報表模塊將數(shù)據(jù)以表格的形式展現(xiàn)。根據(jù)氣報表模塊可以快速查出某一時刻氣體報警的詳細(xì)信息。本項目主要是通過實現(xiàn)智慧工廠的氣報表模塊來學(xué)習(xí)Angular路由的配置與使用。功能描述功能描述使用Bootstrap+Angular實現(xiàn)智慧工廠氣報表模塊。使用Bootstrap相關(guān)知識設(shè)計智慧工廠氣報表模塊通過Angular數(shù)據(jù)綁定實現(xiàn)表格數(shù)據(jù)的顯示通過路由的配置進(jìn)行頁面的跳轉(zhuǎn)及傳參企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實現(xiàn)效果實現(xiàn)效果PRESENT企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)技能任務(wù)技能任務(wù)技能01Angular路由概述02Angular路由基本用法03Angular路由的使用企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular路由概述Angular路由可以實現(xiàn)不同模塊的組件協(xié)同工作。實現(xiàn)從一個視圖導(dǎo)航到另一個視圖，且可以附加可選參數(shù)傳遞給組件，通過不同的URL跳轉(zhuǎn)到不同的頁面(HTML)。Angular路由概述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular路由基本用法配置Angular路由：Routes（定義路由配置）、RouterOutlet（標(biāo)記放置路由的內(nèi)容位置）、RouterLink指令（創(chuàng)建路由鏈接）01Angular路由基本用法企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）在app.module.ts文件中，從@angular/router庫中入

RouterModule02導(dǎo)入RouterModule企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）使用

RouterModule.forRoot()來為應(yīng)用程序提供使用路由必需的依賴RouterModule

對象提供了兩個靜態(tài)的方法forRoot()

、

forChild()

（2）配置路由需要用到Routers數(shù)組，數(shù)組的每一個元素即為一個路由配置項path（path不能用斜線開頭）屬性定義路由的匹配路徑component

屬性定義路由匹配時需要加載的組件03配置路由企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）RouterOutlet指令是用來標(biāo)記路由顯示視圖的位置，指定在頁面的哪一位置渲染路由的內(nèi)容。<router-outlet></router-outlet>//此處呈現(xiàn)component04調(diào)用RouterOutlet指令企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）使用routerLink指令。當(dāng)在標(biāo)簽上綁定routerLink指令，用戶通過點擊標(biāo)簽，來進(jìn)行導(dǎo)航<ul><li><a[routerLink]="['home']">Home</a></li><li><a[routerLink]="['about']">About</a></li></ul>05調(diào)用routerLink指令企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular路由的使用（1）路由傳參（2）重定向路由（3）子路由（4）輔助路由（5）路由守衛(wèi)01Angular路由的使用企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）在HTML模板中添加屬性[queryParams]，使其攜帶參數(shù)（2）在ts文件中，創(chuàng)建變量來接收傳遞過來的參數(shù)，使用ActivatedRoute服務(wù)保存當(dāng)前路由的信息，并使用參數(shù)快照（snapshot屬性）接收路由傳遞過來的參數(shù)02普通方式傳參企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）在app-routing.module.ts中修改path屬性值使其攜帶參數(shù)（2）在HTML模板添加傳遞參數(shù)（3）使用參數(shù)快照（snapshot屬性）獲取參數(shù)值03在path中傳遞參數(shù)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）主要作用是當(dāng)訪問一個特定地址時，將其重定向到另一個指定的地址。重定向路由的配置如下：{path:'要定向的路徑',redirectTo:'要定向到的目標(biāo)路由'，pathMatch:'匹配方式'}04重定向路由企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）子路由是嵌套在主路由里，由children表明這是子路由且可以無限循環(huán)嵌套。05子路由企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）在主路由的插座定義一個輔助路由插座。添加一個name屬性用來指定輔助路由顯示的組件（2）配置入口參數(shù)。添加outlets屬性，該對象里面?zhèn)魅肷鲜龅膎ame屬性值（3）配置輔助路由路徑。添加outlet屬性，指定該路由顯示在對應(yīng)名稱的路由插座上06輔助路由企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）允許從一個頁面跳轉(zhuǎn)到另一個頁面時執(zhí)行一些指定的邏輯，并根據(jù)執(zhí)行的結(jié)果來決定是否跳轉(zhuǎn)。07路由守衛(wèi)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)實施任務(wù)實施第一步第二步第三步編寫氣報表組件，其為一個表格，并設(shè)置其樣式編寫氣報表詳情組件，通過id把數(shù)據(jù)傳入詳情頁編寫質(zhì)量指數(shù)組件，并設(shè)置其樣式企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）氣報表在命令窗口輸入以下命令創(chuàng)建路由文件、氣報表、氣報表詳情、存儲數(shù)據(jù)的服務(wù)組件；并注入服務(wù)文件在服務(wù)文件定義一個類并填充數(shù)據(jù)在HTML模板中，設(shè)置氣報表，表格數(shù)據(jù)通過使用NgFor指令遍歷循環(huán)顯示在對應(yīng)界面的ts文件，使用gerProducts()方法從服務(wù)中獲取數(shù)據(jù)氣報表詳情配置路由。當(dāng)點擊查看詳情時，通過id把數(shù)據(jù)傳入詳情頁在服務(wù)文件中寫入根據(jù)商品id在數(shù)組找到對應(yīng)商品的方法設(shè)置氣報表詳情界面任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述通過對智慧工廠氣報表模塊的學(xué)習(xí)，對氣報表模塊中路由跳轉(zhuǎn)等所需知識具有初步了解，掌握氣報表模塊的頁面跳轉(zhuǎn)的流程，了解Angular路由的使用方法，具有獨立運用Angular路由基本用法的能力。為界面導(dǎo)航打下一定基礎(chǔ)。延遲符企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)Thanks項目七--智慧工廠環(huán)安管理模塊合作開拓責(zé)任企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務(wù)實施任務(wù)需求任務(wù)總結(jié)03Optionhere04Optionhere任務(wù)技能任務(wù)需求任務(wù)需求學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解環(huán)安管理模塊動畫效果實現(xiàn)流程學(xué)習(xí)Angular服務(wù)、動畫的相關(guān)知識掌握HTTP服務(wù)的使用具有使用Angular服務(wù)實現(xiàn)數(shù)據(jù)傳輸?shù)哪芰W(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入在智慧工廠中央管理系統(tǒng)的制作過程中，路由管理和視圖加載具有一定的重要性，當(dāng)兩個視圖數(shù)據(jù)一致時，我們也許會把代碼一遍又一遍的復(fù)制，智慧工廠的開發(fā)人員覺得這樣會很麻煩，所以他們使用服務(wù)提供一種能在應(yīng)用的整個生命周期內(nèi)保持和共享數(shù)據(jù)的方法，當(dāng)用到時只需把它注入到相應(yīng)的組件中。使用服務(wù)可以保持組件精簡，使其集中精力為視圖提供支持。本項目主要講解Angular服務(wù)以及動畫的應(yīng)用。功能描述功能描述使用Bootstrap+Angular實現(xiàn)智慧工廠環(huán)安管理模塊。使用Bootstrap相關(guān)知識設(shè)計智慧工廠環(huán)安管理模塊使用Angular動畫實現(xiàn)界面動態(tài)效果使用Angular服務(wù)實現(xiàn)數(shù)據(jù)傳輸企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實現(xiàn)效果實現(xiàn)效果PRESENT企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)技能任務(wù)技能任務(wù)技能01Angular服務(wù)概述02HTTP服務(wù)03Angular動畫企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular服務(wù)概述Angular服務(wù)是指能夠被其它的組件或者指令調(diào)用的、可共享的代碼塊，當(dāng)有組件需要時，通過依賴注入，將其注入到組件中。具有提高代碼的利用率，方便組件之間共享數(shù)據(jù)和方法，方便測試和維護(hù)等優(yōu)點01Angular服務(wù)概述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）HTTP服務(wù)大多數(shù)前端應(yīng)用都需要通過HTTP協(xié)議與后端服務(wù)器進(jìn)行通訊。在前端開發(fā)中，一般通過AJAX原生進(jìn)行服務(wù)器的訪問，但在訪問服務(wù)器時會發(fā)生跨域問題，通過JSONP可以解決這一問題。本項目主要講解的是Angular封裝好的AJAX（被HttpModule封裝的HTTP服務(wù)）進(jìn)行服務(wù)器的訪問。HTTP服務(wù)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）AJAX是使用XMLHttpRequest對象（支持同步和異步的方式發(fā)送請求，默認(rèn)用異步方式）向服務(wù)器請求并操作數(shù)據(jù)的一種通訊傳輸技術(shù)。01AJAX介紹企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）JSONP是用于解決主流瀏覽器的跨域訪問數(shù)據(jù)的問題。在Web開發(fā)中，有時需要向與當(dāng)前頁面不同源（域名，協(xié)議，端口不相同）的服務(wù)器發(fā)送AJAX請求，這時就需要用到JSONP。其實現(xiàn)方式在客戶端聲明回調(diào)函數(shù)，通過GET方法向服務(wù)器跨域請求數(shù)據(jù)，然后服務(wù)端返回相應(yīng)的數(shù)據(jù)并動態(tài)執(zhí)行回調(diào)函數(shù)。02

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

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