《Angular项目实战》课件-CORE07

项目七--智慧工厂环安管理模块合作开拓责任企业级卓越人才培养（信息类专业集群）目录01Optionhere02Optionhere任务实施任务需求任务总结03Optionhere04Optionhere任务技能任务需求任务需求学习目标学习目标了解环安管理模块动画效果实现流程学习Angular服务、动画的相关知识掌握HTTP服务的使用具有使用Angular服务实现数据传输的能力学习路径学习路径企业级卓越人才培养（信息类专业集群）情景导入情境导入在智慧工厂中央管理系统的制作过程中，路由管理和视图加载具有一定的重要性，当两个视图数据一致时，我们也许会把代码一遍又一遍的复制，智慧工厂的开发人员觉得这样会很麻烦，所以他们使用服务提供一种能在应用的整个生命周期内保持和共享数据的方法，当用到时只需把它注入到相应的组件中。使用服务可以保持组件精简，使其集中精力为视图提供支持。本项目主要讲解Angular服务以及动画的应用。功能描述功能描述使用Bootstrap+Angular实现智慧工厂环安管理模块。使用Bootstrap相关知识设计智慧工厂环安管理模块使用Angular动画实现界面动态效果使用Angular服务实现数据传输企业级卓越人才培养（信息类专业集群）基本框架基本框架实现效果实现效果PRESENT企业级卓越人才培养（信息类专业集群）任务技能任务技能任务技能01Angular服务概述02HTTP服务03Angular动画企业级卓越人才培养（信息类专业集群）Angular服务概述Angular服务是指能够被其它的组件或者指令调用的、可共享的代码块，当有组件需要时，通过依赖注入，将其注入到组件中。具有提高代码的利用率，方便组件之间共享数据和方法，方便测试和维护等优点01Angular服务概述企业级卓越人才培养（信息类专业集群）HTTP服务大多数前端应用都需要通过HTTP协议与后端服务器进行通讯。在前端开发中，一般通过AJAX原生进行服务器的访问，但在访问服务器时会发生跨域问题，通过JSONP可以解决这一问题。本项目主要讲解的是Angular封装好的AJAX（被HttpModule封装的HTTP服务）进行服务器的访问。HTTP服务企业级卓越人才培养（信息类专业集群）AJAX是使用XMLHttpRequest对象（支持同步和异步的方式发送请求，默认用异步方式）向服务器请求并操作数据的一种通讯传输技术。01AJAX介绍企业级卓越人才培养（信息类专业集群）JSONP是用于解决主流浏览器的跨域访问数据的问题。在Web开发中，有时需要向与当前页面不同源（域名，协议，端口不相同）的服务器发送AJAX请求，这时就需要用到JSONP。其实现方式在客户端声明回调函数，通过GET方法向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。02

JSONP介绍企业级卓越人才培养（信息类专业集群）相对于XMLHttpRequest，使用HttpModule也可以实现同样的功能，而且更加简单，代码更加简洁。HttpModule是用来封装HTTP服务相关功能的模块，该模块不仅包含了HTTP服务，而且也包含了HTTP所依赖的其它服务03HttpModule

企业级卓越人才培养（信息类专业集群）Angular动画其实现首先需要安装项目依赖包，然后引入BrowserAnimationsModule函数，最后使用动画触发器（animationtriggers），来定义一系列状态和过渡时间。01Angular动画企业级卓越人才培养（信息类专业集群）定义一个动画触发器，需要用到trigger()方法，这个方法接受两个参数（动画标识符、多个状态转场的数组02动画触发器的格式企业级卓越人才培养（信息类专业集群）trigger(‘triggerName’,[//定义的是每个状态的最终样式state(‘状态名称一’,style({CSS样式})),state(‘状态名称二’,style({CSS样式})),//定义的是状态的转场样式transition(‘状态名称一=>状态名称二’,animate（过渡时间）),transition(‘状态名称二=>状态名称一’,animate（过渡时间）)])Anguar动画状态:（1）通配符状态（2）void状态Angular动画过渡时间:（1）持续时间（2）延迟（3）缓动03动画触发器的参数企业级卓越人才培养（信息类专业集群）（1）安装动画依赖包（2）在AppModule.ts中引入BrowserAnimationsModule函数（3）新建动画文件，编写动画触发器（4）在组件ts里引入动画文件04如何使用Angular动画企业级卓越人才培养（信息类专业集群）任务实施任务实施第一步第二步第三步设置监控组件。本组件主要分为尾气风机监控、合成废水报警、废气监控三个模块为监控组件设置布局样式，背景颜色以及更多信息按钮样式设置监控详情组件。实现监控详情组件的显示与隐藏切换。企业级卓越人才培养（信息类专业集群）任务实施第四步第五步设置环安问题列表和会话组件，环安问题列表主要是显示监控出现的一些问题，会话组件为最近联系人的一些对话设置环安问题列表和会话组件样式，为该组件设置边框、字体样式等，并加上动画效果企业级卓越人才培养（信息类专业集群）任务总结任务技能任务实施任务总结任务描述本项目通过对智慧工厂环安管理模块的学习，学习了Angu