項目一--初識Angular合作開拓責任企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務實施任務需求任務總結03Optionhere04Optionhere任務技能任務需求任務需求學習目標學習目標了解登錄功能的實現(xiàn)流程學習Angular環(huán)境的搭建掌握Angular項目的創(chuàng)建具備創(chuàng)建Angular項目的能力學習路徑學習路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情景導入情境導入在工業(yè)生產中，會產生大量的數(shù)據(jù)，工作人員需要對數(shù)據(jù)進行監(jiān)控和整理，但是，通過人力來監(jiān)控和整理數(shù)據(jù)會花費很多的時間與精力。因此，某公司開發(fā)了一個可以分析、監(jiān)控數(shù)據(jù)的系統(tǒng)，此系統(tǒng)主要應用于工業(yè)生產中，能快速的分析、整理數(shù)據(jù)，可以提高工作效率，降低生產成本。于是該公司給此系統(tǒng)命名為：“智慧工廠中央管理系統(tǒng)”，簡稱“智慧工廠”。本項目主要是通過實現(xiàn)智慧工廠登錄模塊來學習Angular的環(huán)境搭建及項目創(chuàng)建。功能描述功能描述通過Bootstrap+Angular實現(xiàn)智慧工廠登錄模塊。使用Bootstrap設計智慧工廠登錄模塊使用表單實現(xiàn)用戶名、密碼的輸入使用Angular路由實現(xiàn)登錄跳轉企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實現(xiàn)效果實現(xiàn)效果PRESENT企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務技能任務技能任務技能01智慧工廠中央管理系統(tǒng)概述02Angular概述03Angular環(huán)境搭建04Angular項目結構企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）智慧工廠中央管理系統(tǒng)概述智慧工廠中央管理系統(tǒng)能夠提高工廠生產過程的可控性，減少生產線上人工的干預，及時正確地采集生產線數(shù)據(jù)，提高企業(yè)工作效率和生產能力。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ù)可以更直觀的反應問題（2）分析預警值，做出優(yōu)化處理使被監(jiān)控設備達到高效率的工作03智慧工廠中央管理系統(tǒng)的優(yōu)勢企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular概述Angular的出現(xiàn)解決了使用靜態(tài)網(wǎng)頁技術構建Web應用的不足，讓瀏覽器能夠顯示出更多想要的效果。Angular和AngularJS的區(qū)別如下：解決了AngularJS的架構限制問題和提升相關的性能在快速變化的Web時代，Angular支持更多的組件，并添加一些針對于移動應用的新特性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安裝文件進行安裝（3）檢測Node.js是否安裝成功打開命令窗口，輸入node-v顯示當前版本號，表示安裝成功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目錄包含應用的組件和模塊，在開發(fā)項目中所有的編碼都在該文件下；assets是存儲靜態(tài)資源；index.html程序啟動時訪問該界面；main.ts整個項目的入口點，Angular通過這個文件來啟動項目；styles.css主要是放置全局的樣式；tsconfig.app.json主要配置TypeScript。Augular項目結構企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務實施任務實施第一步第二步第三步將登錄界面分成左邊和右邊兩部分，通過命令創(chuàng)建主組件以及左側標題和右側表單輸入組件設置左側標題內容，通過h2標簽設置智慧工廠中央管理系統(tǒng)的標題使用表單設置用戶名、密碼輸入，在form標簽中創(chuàng)建doLogin()方法，通過[disabled]設置登錄按鈕禁用效果企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務總結任務技能任務實施任務總結任務描述

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