《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]设置登录按钮禁用效果企业级卓越人才培养（信息类专业集群）任务总结任务技能任务实施任务总结任务描述

本项目通过对智慧工厂中央管理系统登录功能的学习，对