《Angular項目實戰》02 智慧工廠主界面寫字字帖

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

使用Bootstrap實現界面布局使用TypeScript實現左側菜單選中狀態使用Angular創建組件企業級卓越人才培養（信息類專業集群）基本框架基本框架實現效果實現效果PRESENT企業級卓越人才培養（信息類專業集群）任務技能任務技能任務技能01TypeScript概述02TypeScript內置類型03函數04類企業級卓越人才培養（信息類專業集群）TypeScript概述TypeScript概述TypeScript是JavaScript的超集（擴展了JavaScript語句），其本質是向JavaScript添加了靜態類型（聲明數據類型）和基于類的面向對象編程（如屬性、方法、繼承等）。具有協同開發，提高效率等優點。TypeScript主要特點包括：增加了可選類型、類和模塊可編譯成可讀的、標準的JavaScript支持開發大規模JavaScript應用用于開發大型應用，并保證編譯后的JavaScript代碼兼容性文件擴展名為.ts，通過編輯器可編譯成.js文件可以更加方便的調試項目TypeScript安裝使用TypeScript語言之前，需要通過Node.js包管理器進行安裝，安裝步驟如下所示：第一步：安裝Node.js（詳見項目一）第二步：通過Node.js的npm安裝TypeScript

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

本項目通過對智慧工廠主界面模塊的學習