《Angular项目实战》03 智慧工厂人员档案模块写字字帖_第1页
《Angular项目实战》03 智慧工厂人员档案模块写字字帖_第2页
《Angular项目实战》03 智慧工厂人员档案模块写字字帖_第3页
《Angular项目实战》03 智慧工厂人员档案模块写字字帖_第4页
《Angular项目实战》03 智慧工厂人员档案模块写字字帖_第5页
已阅读5页，还剩16页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目三--智慧工厂人员档案模块合作开拓责任企业级卓越人才培养（信息类专业集群）目录01Optionhere02Optionhere任务实施任务需求任务总结03Optionhere04Optionhere任务技能任务需求任务需求学习目标学习目标了解人员档案模块的数据显示学习Angular的模板语法掌握Angular的NgFor指令具有解决数据显示问题的能力学习路径学习路径企业级卓越人才培养（信息类专业集群）情景导入情境导入在智慧工厂中央管理系统中，为了实现员工的精细化管理，建立了人员档案模块，在该模块中系统管理员可以查看员工姓名、级别、简介等相关信息。而且，系统管理员也可将优秀员工的信息以轮播图的形式显示。本项目主要是通过实现智慧工厂的人员档案模块来学习Angular的模板语法和数据显示。功能描述功能描述使用Bootstrap+Angular实现智慧工厂人员档案模块。使用Angular模板语法创建项目模板使用Bootstrap实现页面布局使用Angular的NgFor指令实现数据显示企业级卓越人才培养（信息类专业集群）基本框架基本框架实现效果实现效果PRESENT企业级卓越人才培养（信息类专业集群）任务技能任务技能任务技能01Angular架构02Angular模板语法企业级卓越人才培养（信息类专业集群）03Angular数据显示Angular架构01模块Angular应用是模块化的，每个应用中至少含有一个模块，即根模块。模块的主要作用是对组件与服务等进行打包，形成内聚的功能块。02组件界面中的视图区域是由组件组成的，通过在组件中编写HTML模板，最终在界面中被渲染。在组件的ts文件中还可定义应用逻辑等。03模板Angular模板一般以HTML形式存在，通过组件自身所含有的模板可以定义组件视图。其主要作用是定义如何渲染组件。04元数据在创建组件后，对应的ts文件中会自动生成一个@Component装饰器，其包含多个配置项，这些配置项的值即为元数据。元数据的主要作用是渲染组件并执行组件的逻辑。05数据绑定数据绑定可以使模板和组件之间相互关联，相互合作。通过在模板HTML中绑定标记，可以实现数据绑定。06指令指令可以为模板元素添加一些新的功能或特性。Angular中指令具有三种类型：组件、结构型指令、属性型指令。07服务服务可以是类，也可以是对象或者方法。其主要用来在特性模块或者应用中共享数据和方法。将服务注入到最高层的组件或模块中，其子组件或子模块也可应用。08依赖注入通过依赖注入可以提供类的新实例，并负责处理类所需的全部依赖，其主要作用是将服务注入到需要的模块、组件或服务中。Angular模板语法模板的HTML语法丰富多样，与Angular结合使用克服了其在构建应用上的不足。Angular模板语法中兼容大部分HTML元素，不兼容HTML的元素有：<script>、<html>、<body>和<base>等01HTML语法企业级卓越人才培养（信息类专业集群）在编程代码中，双花括号{{…}}中的内容即为模板表达式。主要作用是进行运算并显示其结果。具有以下特点：（1）没有副作用（2）执行迅速（3）应用简单（4）幂等性02模板表达式企业级卓越人才培养（信息类专业集群）03绑定语法通过绑定语法可以协调用户所见视图和应用数据（数据源）交互。Angular提供多种数据绑定，其根据数据流可分为三种：从数据源到视图、从视图到数据源、从视图到数据源再到视图。模板引用变量的主要作用是用来引用模板中的某个DOM元素、指令等，其常用的语法为使用“#”声明变量（或用ref-前缀代替#）。这些变量可以提供在模块中直接访问元素的能力。02模板引用变量企业级卓越人才培养（信息类专业集群）（1）管道操作符（|）管道是一个接收输入值并返回转换结果的函数（2）安全导航操作符

(?.)用来保护出现在属性路径中的null和undefined值（3）非空断言操作符（!）非空断言操作符不会防止出现null或undefined03模板表达式操作符企业级卓越人才培养（信息类专业集群）Angular数据显示01Optionhere02Optionhere03Optionhere04Optionhere插值表达式数据显示的最基本方式是使用插值表达式绑定组件的属性名。其语法结构是：{{+（组件属性名（表达式））+}}。NgForNgFor的主要作用是可以循环的从数组中取值并显示出来，类似于for循环。NgIfNgIf的主要作用是根据提供的条件决定是否显示或隐藏这个元素，使用时需将NgIf绑定到元素上。NgSwitchNgSwitch的主要作用是从多个元素中根据switch条件来选取某一个（或多个）。任务实施任务实施第一步第二步第三步设置人员信息，通过NgFor指令遍历循环数据设置优秀团队，将优秀的团队成员展现出来设置优秀员工工作，将优秀员工的工作情况以文字的形式显示企业级卓越人才培养（信息类专业集群）任务总结任务技能任务实施任务总结任务描述

本项目通过对智慧工厂人员档案模块的学习，对人员档案模块中显

人人文库> 全部分类> 行业资料 > 医学制药

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论