《Angular項目實戰》01 初識Angular寫字字帖

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

RxJS

與

Observable引入了

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

config

set

prefix、npm

config

set

cache

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

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

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