《Angular项目实战》04 智慧工厂能源管理模块写字字帖

项目四--智慧工厂能源管理模块合作开拓责任企业级卓越人才培养（信息类专业集群）目录01Optionhere02Optionhere任务实施任务需求任务总结03Optionhere04Optionhere任务技能任务需求任务需求学习目标学习目标了解智慧工厂能源管理模块的布局学习Angular组件、指令掌握Angular生命周期钩子具备搭建Angular模板视图层的能力学习路径学习路径企业级卓越人才培养（信息类专业集群）情景导入情境导入在现代工业生产管理中，能源管理尤为突出，并且在工业生产中发挥着十分重要的作用。根据能源管理模块能够了解到当今热门的能源新闻，并可以对水能源和气能源进行报警监控。本项目主要是通过实现智慧工厂的能源管理模块来学习Angular的组件和指令。功能描述功能描述使用Bootstrap+Angular实现智慧工厂能源管理模块。使用Bootstrap相关知识设计智慧工厂能源管理模块使用Angular路由实现选项卡切换效果使用Angular内置指令设置组件样式企业级卓越人才培养（信息类专业集群）基本框架基本框架实现效果实现效果PRESENT企业级卓越人才培养（信息类专业集群）任务技能任务技能任务技能01Angular生命周期钩子02Angular组件企业级卓越人才培养（信息类专业集群）03Angular内置指令04Angular自定义指令Angular生命周期钩子Angular提供了多种生命周期钩子，但每种生命周期钩子的调用顺序及次数是不同的，其中ngOnInit()、ngAfterContentInit()、ngAfterViewInit()和ngOnDestroy()在生命周期中只会被调用一次，其它可被调用多次。在组件中，设置组件样式有以下优势：支持CSS类名和选择器，且支持当前组件CSS类名和选择器不会与应用程序中其他类和选择器相冲突应用程序的其他地方无法修改组件样式组件的CSS代码、组件类、HTML代码可以放在同一文件里随时可以更改或删除组件的CSS代码组件添加样式方式具有如下三种：通过设置styles或styleUrls元数据，注：两者不能同时存在，当同时存在时，styles中数据无作用。在HTML模板里定义style属性通过link标签导入CSS文件Angular组件为了吸引更多的用户，Angular提供了动态组件，使项目在运行期间不仅可以引入固定组件，还可以动态加载组件。创建动态组件步骤如下：第一步：指令标记组件显示位置第二步：加载组件第三步：解析组件第四步：创建公共接口第五步：组件调用接口Angular内置指令NgClassNgClass指令主要作用是可以动态设置和编辑给定元素的CSS类，通常在HTML模板中用ngClass表示。通过绑定ngClass指令，可以同时添加或移除多个类。NgStyleNgStyle指令的主要作用是可以使用动态值给特定的DOM元素设定CSS属性。在Angular中，使用NgStyle指令可同时设置多个内联样式Angular自定义指令每个自定义属性指令都需要一个控制器类，在实现属性指令时，需通过@Directive装饰器（声明当前类是一个指令）将元数据添加到控制器类上，控制器类则实现了指令所对应的特定行为。在元数据中声明selector属性用以标志指令的选择对象。使用自定义指令步骤如下。第一步：创建自定义指令文件第二步：创建自定义指令第三步：在模块中声明第四步：在模板文件中引用指令Angular自定义指令任务实施任务实施第一步第二步第三步路由配置。在导航组件中，使用路由，通过点击，跳转到相应的页面中监控系统分为气、水监控，通过选项卡形式分别对两个系统进行监控。监控的数据通过NgFor指令双向绑定显示能源简介使用ul列表设置导航，通过点击li元素进行切换。通过员工登录可以查看到员工哪一时刻登录。企业级卓越人才培养（信息类专业集群）任务总结任务技能任务实施任务总结任务描述

本项目通过对智慧工厂能源管理模块的学习，对能源管理模块中各个组件的创建及所需功能具有进一步了解，掌握