《Angular項(xiàng)目實(shí)戰(zhàn)》03 智慧工廠人員檔案模塊寫字字帖_第1頁
《Angular項(xiàng)目實(shí)戰(zhàn)》03 智慧工廠人員檔案模塊寫字字帖_第2頁
《Angular項(xiàng)目實(shí)戰(zhàn)》03 智慧工廠人員檔案模塊寫字字帖_第3頁
《Angular項(xiàng)目實(shí)戰(zhàn)》03 智慧工廠人員檔案模塊寫字字帖_第4頁
《Angular項(xiàng)目實(shí)戰(zhàn)》03 智慧工廠人員檔案模塊寫字字帖_第5頁
已閱讀5頁，還剩16頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

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

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

本項(xiàng)目通過對(duì)智慧工廠人員檔案模塊的學(xué)習(xí)，對(duì)人員檔案模塊中顯

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論