Angular 17

• 了解 HTML、CSS 和 JavaScript
• 具有 TypeScript 和 RxJS 的经验
• Web开发经验

观众

• 希望学习如何使用 Angular 17 创建动态和响应式 Web 应用程序的开发人员
• 希望从以前版本的 Angular 升级技能的开发人员
• 希望探索 Angular 17 的新功能和改进的程序员

Angular 17 是流行的 Web 框架的最新版本，它引入了许多新功能和改进，例如新的声明式控制流、延迟加载块、视图转换 API 等。

这种以讲师为主导的现场培训（现场或远程）面向希望使用Angular 17的最新功能来构建，测试和部署Web应用程序的初级到中级开发人员。

在培训结束时，参与者将能够：

• 设置包含 Node.js、Visual Studio 代码和 Angular CLI 的开发环境。
• 创建一个基本的 Angular 17 应用程序，用于显示数据并处理用户交互。
• 使用组件、指令、管道、服务和模块来组织和重用代码。
• 使用数据绑定、依赖注入、路由、表单和 HTTP 客户端与后端服务进行通信。
• 使用新的模板控制块语法来简化常见任务，如条件呈现、循环和处理空集合。
• 使用新的 @defer 控制块启用模块内容及其依赖项的延迟加载。
• 使用新的视图过渡 API 自定义视图之间的动画和过渡。
• 使用 Chrome DevTools、Jest、Karma 和 Protractor 等工具调试和测试 Angular 17 个应用程序。

课程形式

• 互动讲座和讨论。
• 大量的练习和练习。
• 在现场实验室环境中动手实施。

课程自定义选项

• 如需申请本课程的定制培训，请联系我们进行安排。

介绍

• 什么是Angular？
• Angular 与 React 与 Vue
• Angular 17 功能和体系结构概述
• 设置开发环境

开始

• 使用 Angular CLI 创建新的 Angular 17 项目
• 浏览项目结构和文件
• 运行和提供应用程序
• 使用插值和表达式显示数据

组件

• 了解组件在 Angular 17 中的作用
• 创建和使用组件
• 使用输入和输出在组件之间传递数据
• 使用组件生命周期钩子

指令

• 了解结构指令和属性指令之间的区别
• 创建和使用内置指令，例如 ngIf、ngFor、ngSwitch 等。
• 创建和使用自定义指令

管道

• 了解 Angular 17 中管道的用途
• 创建和使用内置管道，例如日期、货币、json 等。
• 创建和使用自定义管道

服务业

• 了解服务在 Angular 17 中的作用
• 创建和使用服务
• 使用提供程序注入依赖项

模块

• 了解模块在 Angular 17 中的作用
• 创建和使用模块
• 导入和导出模块

数据绑定

• 了解单向数据绑定和双向数据绑定之间的区别
• 创建和使用属性绑定、事件绑定和 banana-in-a-box 语法
• 使用模板引用变量

路由

• 了解路由在 Angular 17 中的作用
• 创建和配置路由
• 使用 routerLink 和 router.navigate（） 在路由之间导航
• 使用路由参数、查询参数和片段

形式

• 了解模板驱动表单和响应式表单之间的区别
• 使用表单控件、表单组、表单数组等创建和验证表单。
• 使用内置验证器，例如 required、minLength、maxLength 等。
• 创建和使用自定义验证程序

HTTP 客户端

• 了解 HTTP 客户端在 Angular 17 中的角色
• 创建和使用 HTTP 请求与后端服务通信
• 使用 observables 处理异步数据流
• 使用拦截器修改或处理 HTTP 请求或响应

新的声明式控制流

• 解释新的模板控制块语法，以及它如何简化常见任务，如条件呈现、循环和处理空集合
• 举例说明如何使用新块，例如 @if、@else、@switch、@case、@default、@for 和 @empty
• 将新语法与前一个语法进行比较，例如 *ngIf、*ngSwitch 和 *ngFor
• 提及新的控制模块如何支持带信号的无区域应用

延迟加载块

• 解释延迟加载的概念以及它如何提高 Web 应用程序的性能和用户体验
• 引入新的 @defer 控制块，该控制块支持延迟加载块的内容及其依赖项
• 举例说明在不同场景中使用 @defer 块，例如加载组件、指令、管道、动画和样式
• 提及 @defer 块如何与新的视图转换 API 配合使用

查看过渡 API

• 解释视图过渡 API 的用途和好处，该 API 允许开发人员自定义视图之间的动画和过渡
• 引入新的 withViewTransitions 指令，该指令允许使用视图转换 API
• 举例说明如何将 withViewTransitions 指令用于不同的过渡类型，例如淡入淡出、滑动、缩放和翻转
• 提及视图转换 API 如何与 Angular 路由器和浏览器历史记录配合使用

其他功能和改进

• 简要总结 Angular 17 提供的其他一些功能和改进，例如：
• 支持将 @Component.styles 作为字符串传入
• Angular 的动画代码是可延迟加载的
• TypeScript 5.2 支持
• 核心信号 API 现已稳定
• Node.js 删除了 v16 支持，最低支持版本为 v18.13.0
• Esbuild 将是默认的构建器，默认的开发服务器将使用 Vite

摘要和后续步骤