Angular 17 培训

Angular 17 简介

• 什么是 Angular？
• Angular vs React vs Vue
• Angular 17 功能和架构概览
• 配置开发环境

入门

• 使用 Angular CLI 创建新的 Angular 17 项目
• 探索项目结构和文件
• 运行和部署应用
• 使用插值和表达式显示数据

组件

• 理解组件在 Angular 17 中的作用
• 创建和使用组件
• 使用 inputs 和 outputs 在组件间传递数据
• 使用组件生命周期钩子

指令

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

管道

• 理解管道在 Angular 17 中的用途
• 创建和使用内置管道，如 date、currency、json 等
• 创建和使用自定义管道

服务

• 理解服务在 Angular 17 中的作用
• 创建和使用服务
• 使用 providers 注入依赖项

模块

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

数据绑定

• 理解单向数据绑定和双向数据绑定的区别
• 创建和使用属性绑定、事件绑定和香蕉盒语法
• 使用模板引用变量

路由

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

表单

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

HTTP 客户端

• 理解 HTTP 客户端在 Angular 17 中的作用
• 创建和使用 HTTP 请求与后端服务通信
• 使用可观察对象处理异步数据流
• 使用拦截器修改或处理 HTTP 请求或响应

新的声明式控制流

• 解释新的模板控制块语法，以及它如何简化条件渲染、循环和空集合处理等常见任务
• 提供使用新块的示例，如 @if、@else、@switch、@case、@default、@for 和 @empty
• 对比新语法与旧语法，如 *ngIf、*ngSwitch 和 *ngFor
• 提及新的控制块如何支持基于信号的无区域应用

延迟加载块

• 解释延迟加载的概念，以及它如何提升 Web 应用的性能和用户体验
• 介绍新的 @defer 控制块，实现块内容及其依赖项的懒加载
• 提供在不同场景下使用 @defer 块的示例，如加载组件、指令、管道、动画和样式
• 提及 @defer 块如何与新的视图过渡 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