《Angular項目實戰(zhàn)》02 智慧工廠主界面寫字字帖

項目二--智慧工廠主界面合作開拓責(zé)任企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務(wù)實施任務(wù)需求任務(wù)總結(jié)03Optionhere04Optionhere任務(wù)技能任務(wù)需求任務(wù)需求學(xué)習(xí)目標學(xué)習(xí)目標了解智慧工廠項目的基本布局學(xué)習(xí)TypeScript概述、安裝掌握TypeScript內(nèi)置類型具備使用函數(shù)和類的能力學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入智慧工廠中央管理系的主界面是一個軟件系統(tǒng)的窗口，簡潔美觀的界面可以給用戶帶來一種視覺享受，增加用戶對軟件的喜愛程度，于是開發(fā)人員與大家分享如何做出美觀、大方的界面。通過該界面，詳細的介紹了公司的企業(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的超集（擴展了JavaScript語句），其本質(zhì)是向JavaScript添加了靜態(tài)類型（聲明數(shù)據(jù)類型）和基于類的面向?qū)ο缶幊蹋ㄈ鐚傩?、方法、繼承等）。具有協(xié)同開發(fā)，提高效率等優(yōu)點。TypeScript主要特點包括：增加了可選類型、類和模塊可編譯成可讀的、標準的JavaScript支持開發(fā)大規(guī)模JavaScript應(yīng)用用于開發(fā)大型應(yīng)用，并保證編譯后的JavaScript代碼兼容性文件擴展名為.ts，通過編輯器可編譯成.js文件可以更加方便的調(diào)試項目TypeScript安裝使用TypeScript語言之前，需要通過Node.js包管理器進行安裝，安裝步驟如下所示：第一步：安裝Node.js（詳見項目一）第二步：通過Node.js的npm安裝TypeScript

當(dāng)安裝完成后，在命令窗口輸入tsc–v進行安裝檢驗，如果出現(xiàn)圖所示，則表示安裝成功。TypeScript內(nèi)置類型屬性值只能為true或false。letstu:boolean=false;TypeScript中包含的數(shù)字均屬于Number類型。letid:number=9;letFloor_nub:number=0b1010;實現(xià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í)行的語句塊，具有代碼清晰易懂，便于維護等優(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è)置默認值01可選參數(shù)和默認參數(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）是在類進行實例化時執(zhí)行的特殊函數(shù)繼承主要作用是子類通過繼承（用extends關(guān)鍵字實現(xiàn)）獲取父類的行為，最終，可在子類中重寫、修改以及添加行為任務(wù)實施任務(wù)實施第一步第二步第三步設(shè)置頭部內(nèi)容。使用Bootstrap設(shè)計布局與樣式在ponent.html文件中對各個組件進行布局，設(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í)