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

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

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

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

本項(xiàng)目通過(guò)對(duì)智慧工廠主界面模塊的學(xué)習(xí)