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

下載本文檔

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

文檔簡介

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

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

本項目通過對智慧工廠人員檔案模塊的學習，對人員檔案模塊中顯

溫馨提示

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

評論

0/150

提交評論