项目一 --初识Angular合作开拓责任企业级卓越人才培养（信息类专业集群）目录01Option here02Option her
e任务实施任务需求任务总结03Option here04Option here任务技能任务需求任务需求学习目标学习目标了解登录功能
的实现流程学习Angular环境的搭建掌握Angular项目的创建具备创建Angular项目的能力学习路径学习路径企业级卓越人才培
养（信息类专业集群）情景导入情境导入在工业生产中，会产生大量的数据，工作人员需要对数据进行监控和整理，但是，通过人力来监控和整理数
据会花费很多的时间与精力。因此，某公司开发了一个可以分析、监控数据的系统，此系统主要应用于工业生产中，能快速的分析、整理数据，可以
提高工作效率，降低生产成本。于是该公司给此系统命名为：“智慧工厂中央管理系统”，简称“智慧工厂”。本项目主要是通过实现智慧工厂登录
模块来学习Angular的环境搭建及项目创建。功能描述功能描述通过Bootstrap+Angular实现智慧工厂登录模块。使用Bo
otstrap设计智慧工厂登录模块使用表单实现用户名、密码的输入使用Angular路由实现登录跳转企业级卓越人才培养（信息类专业集
群）基本框架基本框架实现效果实现效果PRESENT企业级卓越人才培养（信息类专业集群）任务技能任务技能任务技能01 智慧工厂中央
管理系统概述02 Angular概述03 Angular环境搭建04 Angular项目结构企业级卓越人才培养（信息类专业集
群）智慧工厂中央管理系统概述智慧工厂中央管理系统能够提高工厂生产过程的可控性，减少生产线上人工的干预，及时正确地采集生产线数据，提
高企业工作效率和生产能力。01智慧工厂中央管理系统项目背景企业级卓越人才培养（信息类专业集群）（1）数据采集（2）采集数据的分析与
处理（3）采集数据的输出02智慧工厂中央管理系统的功能企业级卓越人才培养（信息类专业集群）（1）图表形式展现数据可以更直观的反应问
题（2）分析预警值，做出优化处理使被监控设备达到高效率的工作03智慧工厂中央管理系统的优势企业级卓越人才培养（信息类专业集群）An
gular概述Angular的出现解决了使用静态网页技术构建Web应用的不足，让浏览器能够显示出更多想要的效果。Angular和A
ngularJS的区别如下：解决了AngularJS的架构限制问题和提升相关的性能在快速变化的Web时代，Angular支持更多的
组件，并添加一些针对于移动应用的新特性Angular比之前的版本开发接口更简单不再有Controller和Scope引入了?RxJ
S?与?Observable引入了?Zone.js，提供更加智能的变化检测Angular概述企业级卓越人才培养（信息类专业集群）A
ngular环境搭建（1）下载安装包在Node.js官网下载安装包，官网地址为：https://nodejs.org/en/（2）
安装Node.js双击打开nodejs.exe安装文件进行安装（3）检测Node.js是否安装成功打开命令窗口，输入node -v
显示当前版本号，表示安装成功01Node.js安装企业级卓越人才培养（信息类专业集群）（1）新建文件夹在nodejs下建立node
_global、node_cache两个文件夹（2）改变npm的启动和缓存位置通过cmd打开命令窗口输入npm?config?se
t?prefix、npm?config?set?cache?两个命令（3）配置环境变量新建系统变量，变量名为：NODE_PAT；变
量值为：nodejs文件安装目录02Node Package Manager企业级卓越人才培养（信息类专业集群）基于Angular
CLI （1）在project文件夹打开命令窗口（2）使用npm?install -g @Angular/cli命令安装Angu
lar CLI（3）使用ng --version检测是否安装成功03Angular安装企业级卓越人才培养（信息类专业集群）app目
录包含应用的组件和模块，在开发项目中所有的编码都在该文件下；assets是存储静态资源；index.html程序启动时访问该界面；
main.ts整个项目的入口点，Angular通过这个文件来启动项目；styles.css主要是放置全局的样式；tsconfig.
app.json主要配置TypeScript。Augular项目结构企业级卓越人才培养（信息类专业集群）任务实施任务实施第一步第二
步第三步将登录界面分成左边和右边两部分，通过命令创建主组件以及左侧标题和右侧表单输入组件设置左侧标题内容，通过h2标签设置智慧工厂
中央管理系统的标题使用表单设置用户名、密码输入，在form标签中创建doLogin()方法，通过[disabled]设置登录按钮禁
用效果企业级卓越人才培养（信息类专业集群）任务总结任务技能任务实施任务总结任务描述 本项目通过对智慧工厂中央管理系统登录
功能的学习，对Angular的作用及发展具有初步了解，能够使用不同方式搭建Angular环境并掌握Angular项目结构，能够独自使用Angular对界面进行布局和优化。延迟符企业级卓越人才培养（信息类专业集群）任务总结 Thanks |
|
