LUMIFY WORK Angular 15 编程用户指南

应用和 WEB 发展
Angular 15 编程
长度 5 天
版本 15

内容隐藏

为什么学习本课程

这个密集且全面的 Angular 15 培训课程为学员提供了可以立即在工作中使用的技能。您将学习 Angular 15 开发的基础知识，例如单页浏览器应用程序、响应式 web网站和混合移动应用程序。
本课程是理论学习和实践实验室的结合，包括 Angular 简介，然后是 TypeScript、组件、指令、服务、HTTPClient、测试和调试。
笔记： 我们还可以提供其他版本 Angular 的培训。请联系我们进行询问或登记您的兴趣。

Lumify 工作时的角度

你会学到什么

成功完成本课程后，您将具备以下知识：

使用 Typescript 开发单页 Angular 应用程序

搭建完整的Angular开发环境
创建组件、指令、服务、管道、表单和自定义验证器

使用 Observables 处理高级网络数据检索任务
使用 REST 中的数据 web 使用 Angular HTTP 客户端的服务

使用以下方法处理推送数据连接 Web套接字协议
使用 Angular Pipes 格式化数据

使用高级 Angular 组件路由器功能
使用内置工具测试和调试 Angular 应用程序

使用 Angular CLI

我的导师非常出色，能够将与我的具体情况相关的场景放入现实世界的实例中。
从我到达的那一刻起，我就受到了欢迎，能够在教室外以小组形式讨论我们的情况和我们的目标是非常有价值的。
我学到了很多东西，并认为通过参加这门课程来实现我的目标很重要。
Lumify 工作团队干得好。阿曼达·尼科尔
IT 支持服务经理 – HEALTH WORLD LIMITED

课程科目

介绍角度
• 什么是Angular？
• Angular 框架的核心特征
• 适当的用例
• Angular 应用程序的构建块
• Angular 应用程序的基本架构
• 安装和使用 Angular
• 角度应用的剖析
• 运行应用程序
• 构建和部署应用程序
• 用于本机移动应用程序的 Angular
TypeScript 简介
• 用于 Angular 的编程语言
• TypeScript 语法
• 节目编辑
• 类型系统——定义变量
• 类型系统——定义数组
• 基本基元类型
• 输入函数
• 类型推断
• 定义类
• 类方法
• 能见度控制
• 类构造函数
• 类构造函数——替代形式
• 未初始化的字段
• 接口
• 使用 ES6 模块
• var 与 let
• 箭头功能
• 箭头函数紧凑语法
• 模板字符串
• 类中的泛型
• 函数中的泛型

成分
• 什么是组件？
• 前任amp组件
• 使用 Angular CLI 创建组件
• 组件类
• @Component 装饰器
• 将组件注册到其模块
• 组件模板
• 前任ample：HelloComponent 模板
• 前任ample：HelloComponent 类
• 使用组件
• 运行应用程序
• 组件层次结构
• 应用程序根组件
• 引导程序 File
• 组件生命周期挂钩
• 前任amp生命周期钩子
• CSS 样式
组件模板
• 模板
• 模板位置
• Mustache {{ }} 语法
• 设置 DOM 元素属性
• 设置元素正文
• 事件绑定
• 表达式事件处理程序
• 防止违约处理
• 属性指令
• 通过更改 CSS 类来应用样式
• 前任ample: ngClass
• 直接应用样式
• 结构指令
• 有条件执行模板
• 前任amp文件：ngIf
• 使用 ngFor 循环
• ng对于局部变量
• 操作集合
• 前任ample – 删除项目
• 使用 ngFor 进行项目跟踪
• 使用 ngSwitch 交换元素
• 对元素进行分组
• 模板引用变量

组件间通信
• 沟通基础知识
• 数据流架构
• 让孩子做好接收数据的准备
• 从父级发送数据
• 有关设置属性的更多信息
• 来自组件的触发事件
• @Output() Example – 子组件
• @Output() Example – 父组件
• 完全双向绑定
• 在父级中设置双向数据绑定
模板驱动表单
• 模板驱动表单
• 导入表单模块
• 基本方法
• 设置表单
• 获取用户输入
• 省略 ngForm 属性
• 初始化表单
• 双向数据绑定
• 表单验证
• 角度验证器
• 使用类显示验证状态
• 附加输入类型
• 复选框
• 选择（下拉）字段
• 选择（下拉）的渲染选项
• 日期字段
• 单选按钮

反应形式
• 反应形式结束view
• 构建模块
• 导入反应式表单模块
• 构建表单
• 设计模板
• 获取输入值
• 初始化输入字段
• 设置表单值
• 订阅输入更改
• 验证
• 内置验证器
• 显示验证错误
• 自定义验证器
• 使用自定义验证器
• 向自定义验证器提供配置
• FormArray – 动态添加输入
• FormArray – 组件类
• FormArray – 模板
• FormArray – 值
• 子表单组 – 组件类
• 子表单组 – HTML 模板
• 为什么使用子表单组
服务和依赖注入
• 什么是服务？
• 创建基本服务
• 服务等级
• 什么是依赖注入？
• 注入服务实例
• 注射器
• 注入器层次结构
• 使用根注入器注册服务
• 使用组件的注入器注册服务
• 使用功能模块注入器注册服务
• 在哪里注册服务？
• 其他工件中的依赖注入
• 提供替代实施方案
• 依赖注入和@Host
• 依赖注入和@Optional

HTTP 客户端
• Angular HTTP 客户端
• 使用 HTTP 客户端 – 结束view
• 导入 HttpClientModule
• 使用HttpClient 的服务
• 发出 GET 请求
• 可观察对象有什么作用？
• 在组件中使用服务
• PeopleService 客户端组件
• 错误处理
• 自定义错误对象
• 发出 POST 请求
• 发出 PUT 请求
• 发出删除请求
管道和数据格式化
• 什么是管道？
• 内置管道
• 在 HTML 模板中使用管道
• 链接管道
• 国际化管道 (i18n)
• 加载区域设置数据
• 日期管道
• 管数
• 货币管道
• 创建自定义管道
• 定制管道防爆ample
• 使用自定义管道
• 将管道与 ngFor 一起使用
• 过滤管
• 管道类别：纯管和非纯管
• 纯管道防爆ample
• 不纯管道防爆ample

单页应用程序简介
• 什么是单页应用程序 (SPA)
• 传统的 Web 应用
• SPA 工作流程
• 单页应用程序高级版tages
• HTML5 历史API
• SPA 挑战
• 使用 Angular 实施 SPA
Angular 组件路由器
• 组件路由器
• View 导航
• Angular 路由器 API
• 创建支持路由器的应用程序
• 托管路由组件
• 使用链接和按钮进行导航
• 程序化导航
• 传递路由参数
• 使用路线参数导航
• 获取路由参数值
• 同步获取路由参数
• 异步检索路由参数
• 查询参数
• 提供查询参数
• 异步检索查询参数
• 手册问题 URL 条目和书签

高级 HTTP 客户端
• 请求选项
• 返回 HttpResponse 对象
• 设置请求标头
• 创建新的可观察量
• 创建一个简单的可观察对象
• 可观察的构造函数方法
• 可观察运算符
• 地图和过滤器操作员
• flatMap() 运算符
• tap() 运算符
• zip() 组合器
• 缓存HTTP 响应
• 进行连续的 HTTP 调用
• 进行并行调用
• 使用catchError() 自定义错误对象
• 管道错误
• 错误恢复
角度模块
• 为什么选择 Angular 模块？
• 模块类剖析
• @NgModule 属性
• 功能模块
• 前任amp文件模块结构
• 创建域模块
• 创建路由/路由模块对
• 创建服务模块
• 创建通用模块
• 从一个模块使用另一个模块

高级路由
• 路由功能模块
• 使用功能模块
• 延迟加载功能模块
• 为功能模块组件创建链接
• 有关延迟加载的更多信息
• 预加载模块
• routerLinkActive 绑定
• 默认路由
• 通配符路由路径
• 重定向至
• 子路线
• 为子路由定义子路由
• 子路线的链接
• 导航守卫
• 创建 Guard 实现
• 在路线中使用守卫
单元测试角度应用程序
• 单元测试角度工件
• 测试工具
• 典型测试步骤
• 检测结果
• Jasmine 测试套件
• Jasmine 规格（单元测试）
• 期望（断言离子）
• 匹配器
• 前任amp使用匹配器的文件
• 使用 not 属性
• 单元测试套件中的设置和拆卸
• 前任ampbeforeEach 和 afterEach 函数的文件
• 角度测试模块
• 前任amp角度测试模块
• 测试服务
• 注入服务实例
• 测试同步方法
• 测试异步方法
• 使用模拟 HTTP 客户端
• 提供预设回复
• 测试组件
• 组件测试模块
• 创建组件实例
• ComponentFixture 类
• 基本组件测试
• DebugElement 类
• 模拟用户交互

调试
• 超过view 角度调试
• View在调试器中使用 TypeScript 代码
• 使用 debugger 关键字
• 调试日志
• 什么是Angular DevTools？
• 使用 Angular 开发工具
• Angular DevTools – 组件结构
• Angular DevTools – 更改检测执行
• 捕获语法错误