《Angular項目實戰(zhàn)》01 初識Angular寫字字帖

項目一--初識Angular合作開拓責(zé)任企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務(wù)實施任務(wù)需求任務(wù)總結(jié)03Optionhere04Optionhere任務(wù)技能任務(wù)需求任務(wù)需求學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解登錄功能的實現(xiàn)流程學(xué)習(xí)Angular環(huán)境的搭建掌握Angular項目的創(chuàng)建具備創(chuàng)建Angular項目的能力學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入在工業(yè)生產(chǎn)中，會產(chǎn)生大量的數(shù)據(jù)，工作人員需要對數(shù)據(jù)進(jìn)行監(jiān)控和整理，但是，通過人力來監(jiān)控和整理數(shù)據(jù)會花費(fèi)很多的時間與精力。因此，某公司開發(fā)了一個可以分析、監(jiān)控數(shù)據(jù)的系統(tǒng)，此系統(tǒng)主要應(yīng)用于工業(yè)生產(chǎn)中，能快速的分析、整理數(shù)據(jù)，可以提高工作效率，降低生產(chǎn)成本。于是該公司給此系統(tǒng)命名為：“智慧工廠中央管理系統(tǒng)”，簡稱“智慧工廠”。本項目主要是通過實現(xiàn)智慧工廠登錄模塊來學(xué)習(xí)Angular的環(huán)境搭建及項目創(chuàng)建。功能描述功能描述通過Bootstrap+Angular實現(xiàn)智慧工廠登錄模塊。使用Bootstrap設(shè)計智慧工廠登錄模塊使用表單實現(xiàn)用戶名、密碼的輸入使用Angular路由實現(xiàn)登錄跳轉(zhuǎn)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實現(xiàn)效果實現(xiàn)效果PRESENT企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)技能任務(wù)技能任務(wù)技能01智慧工廠中央管理系統(tǒng)概述02Angular概述03Angular環(huán)境搭建04Angular項目結(jié)構(gòu)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）智慧工廠中央管理系統(tǒng)概述智慧工廠中央管理系統(tǒng)能夠提高工廠生產(chǎn)過程的可控性，減少生產(chǎn)線上人工的干預(yù)，及時正確地采集生產(chǎn)線數(shù)據(jù)，提高企業(yè)工作效率和生產(chǎn)能力。01智慧工廠中央管理系統(tǒng)項目背景企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）數(shù)據(jù)采集（2）采集數(shù)據(jù)的分析與處理（3）采集數(shù)據(jù)的輸出02智慧工廠中央管理系統(tǒng)的功能企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）圖表形式展現(xiàn)數(shù)據(jù)可以更直觀的反應(yīng)問題（2）分析預(yù)警值，做出優(yōu)化處理使被監(jiān)控設(shè)備達(dá)到高效率的工作03智慧工廠中央管理系統(tǒng)的優(yōu)勢企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular概述Angular的出現(xiàn)解決了使用靜態(tài)網(wǎng)頁技術(shù)構(gòu)建Web應(yīng)用的不足，讓瀏覽器能夠顯示出更多想要的效果。Angular和AngularJS的區(qū)別如下：解決了AngularJS的架構(gòu)限制問題和提升相關(guān)的性能在快速變化的Web時代，Angular支持更多的組件，并添加一些針對于移動應(yīng)用的新特性Angular比之前的版本開發(fā)接口更簡單不再有Controller和Scope引入了

RxJS

與

Observable引入了

Zone.js，提供更加智能的變化檢測Angular概述企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular環(huán)境搭建（1）下載安裝包在Node.js官網(wǎng)下載安裝包，官網(wǎng)地址為：/en/（2）安裝Node.js雙擊打開nodejs.exe安裝文件進(jìn)行安裝（3）檢測Node.js是否安裝成功打開命令窗口，輸入node-v顯示當(dāng)前版本號，表示安裝成功01Node.js安裝企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）（1）新建文件夾在nodejs下建立node_global、node_cache兩個文件夾（2）改變npm的啟動和緩存位置通過cmd打開命令窗口輸入npm

config

set

prefix、npm

config

set

cache

兩個命令（3）配置環(huán)境變量新建系統(tǒng)變量，變量名為：NODE_PAT；變量值為：nodejs文件安裝目錄02NodePackageManager企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基于AngularCLI（1）在project文件夾打開命令窗口（2）使用npm

install-g@Angular/cli命令安裝AngularCLI（3）使用ng--version檢測是否安裝成功03Angular安裝企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）app目錄包含應(yīng)用的組件和模塊，在開發(fā)項目中所有的編碼都在該文件下；assets是存儲靜態(tài)資源；index.html程序啟動時訪問該界面；main.ts整個項目的入口點，Angular通過這個文件來啟動項目；styles.css主要是放置全局的樣式；tsconfig.app.json主要配置TypeScript。Augular項目結(jié)構(gòu)企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)實施任務(wù)實施第一步第二步第三步將登錄界面分成左邊和右邊兩部分，通過命令創(chuàng)建主組件以及左側(cè)標(biāo)題和右側(cè)表單輸入組件設(shè)置左側(cè)標(biāo)題內(nèi)容，通過h2標(biāo)簽設(shè)置智慧工廠中央管理系統(tǒng)的標(biāo)題使用表單設(shè)置用戶名、密碼輸入，在form標(biāo)簽中創(chuàng)建doLogin()方法，通過[disabled]設(shè)置登錄按鈕禁用效果企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)任務(wù)技能任務(wù)實施任務(wù)總結(jié)任務(wù)描述

本項目通過對智慧工廠中央管理系統(tǒng)登錄功能的學(xué)習(xí)，對