《Angular项目实战》05 智慧工厂水监控模块写字字帖

项目五--智慧工厂水监控模块合作开拓责任企业级卓越人才培养（信息类专业集群）目录01Optionhere02Optionhere任务实施任务需求任务总结03Optionhere04Optionhere任务技能任务需求任务需求学习目标学习目标了解依赖注入概念学习提供器与注入器的相关知识掌握依赖注入、表单的应用具有使用依赖注入为应用注入服务的能力学习路径学习路径企业级卓越人才培养（信息类专业集群）情景导入情境导入数据的统计方式具有多种，为了更加直观的显示数据，该公司的开发人员选择了折线统计图来实时监控水资源数据，工作人员可以清晰看出各个时间段水压数据的多少，这样节省了大量的查询时间，减少工作人员的工作量。本项目主要是通过实现智慧工厂的水监控模块来学习Angular的依赖注入。功能描述功能描述使用Bootstrap+Angular实现智慧工厂水监控模块。使用Bootstrap实现智慧工厂水监控模块通过Angular依赖注入来注入服务使用Chart.js绘制数据折线图企业级卓越人才培养（信息类专业集群）基本框架基本框架实现效果实现效果PRESENT企业级卓越人才培养（信息类专业集群）任务技能任务技能任务技能01Angular表单02依赖注入的介绍03依赖注入的应用企业级卓越人才培养（信息类专业集群）Angular表单Angular团队对表单进行了封装扩展，提供了模板驱动、响应式两种方式构建表单。使开发者可以使用简洁的代码来构建功能强大的表单。01Angular表单企业级卓越人才培养（信息类专业集群）（1）NgForm指令是表单的控制中心，负责处理表单内的业务逻辑（2）NgModel指令是实现表单控件数据绑定的核心（3）NgModelGroup指令是多个ngModel的集合，用于区分不同类型的表单控件02表单中的指令企业级卓越人才培养（信息类专业集群）NgModel指令不仅能追踪表单控件的状态，还可使用对应的CSS状态类来表示表单控件的状态03表单样式企业级卓越人才培养（信息类专业集群）Angular提供了内置校验和自定义校验两种方式。（1）表单内置校验（2）自定义验证器04表单验证企业级卓越人才培养（信息类专业集群）依赖注入的介绍依赖注入的核心概念包括注入器(Injector)、提供器（Provider）、依赖（Denpendence）：注入器：提供了一系列的接口用于创建依赖对象的实例。其实现方法就是在构造函数中声明提供器：它用于配置注入器。其实现方法是在Provider通过注入器提供的令牌创建被依赖的对象依赖：指定了被依赖对象的类型，注入器会根据此类型创建对应的对象依赖注入的介绍企业级卓越人才培养（信息类专业集群）注入器负责注入组件需要的对象，一般注入器会自动通过组件的构造函数，将组件所需的对象注入到组件中。01注入器企业级卓越人才培养（信息类专业集群）constructor(private对象:类型){}//示例代码constructor(privateprojectServie:ProjectService){}提供器（Provider）描述初始化标（Token）所对应的依赖服务，最终被注入到组件或服务中使用。（1）在模块（如：根模块）中声明提供器（2）在组件中声明提供器02提供器企业级卓越人才培养（信息类专业集群）（1）新建服务（2）在组件构造函数中声明服务（3）在组件中配置注入器（4）通过import导入被依赖的对象服务01在组件中注入服务企业级卓越人才培养（信息类专业集群）依赖注入的应用除了组件依赖服务，服务间依赖也很常见。如：在上面提到的AppService服务中，如果希望在异常时记录错误信息，则创建一个记录错误的服务，并把其注入在AppService服务中。02在服务中注入服务企业级卓越人才培养（信息类专业集群）不同的模块中注入的服务在整个组件中都是可用的，这样增强了模块的扩展性。（1）在两个模块中使用同样的Token注入服务时，后初始化的模块服务会覆盖前面初始化的模块服务（2）在根模块中注入的服务拥有最高优先级03在模块中注入服务企业级卓越人才培养（信息类专业集群）任务实施任务实施第一步第二步第三步编写头部图标。头部图标主要是对水质、水位的显示安装图表环境，在app.moudle.ts文件中引入ChartsModule。编写底部水压监控图组件，设置图表的类型、x轴数据、图表选项等新建JSON文件，声明一个类并定义两个变量；新建服务文件,引入JSON文件，使用Http.get()方法获取URL地址中的数据企业级卓越人才培养（信息类专业集群）任务实施第四步第五步设置水压监控图组件大小、标题背景为绿色等编写简介部分。使用栅格系统布局，分为左侧文字简介以及右侧图片部分企业级卓越人才培养（信息类专业集群）任务总结任务技能任务实施任务总结任务描述通过对智慧工厂水监控模块的学习