Angular Material 组件库的深度导览(在 Angular 16 中)
你将会学到的
-
Github 存储库中的代码,每个部分都有可下载的 ZIP 文件
-
了解如何使用 Angular 材质库
-
了解如何使用 Angular Material 设计响应式应用程序
-
了解如何设置 Angular Material 应用程序的导航菜单
-
了解如何使用最常用的 Angular Material Form Widgets
-
掌握 Angular 材质数据表,学习服务器端分页、排序和过滤
-
了解如何构建 Angular Material 自定义对话框
-
了解如何构建 Angular Material 自定义主题
-
学习 Angular Material Tree 组件、Virtual Scrolling 和其他高级组件
要求
-
只是一些 Angular 和 Typescript 的先前知识
说明
本课程详细介绍了 Angular Material 组件库,并附带了一个正在运行的 Github 存储库。
本课程简而言之
Angular 是一个了不起的框架,它为我们做了很多工作,但核心模块不能自己做的一件事是为您提供常用的用户界面组件。
想象一下使用 Angular 会是什么样子,但每次需要开发应用程序时都必须开发所有下拉框、日期选择器、菜单以及所有这些常用且非常标准的组件。
这不仅不切实际,而且在大多数情况下是不可能的,因为其中一些组件可能需要数周到数月的时间来开发和测试,因为它们很复杂!
此外,如何设置应用程序的样式和主题并确保一切看起来整洁和专业?
想象一下从一个完全空白的页面从头开始设计整个应用程序的样式会是什么样子。这是大多数公司都希望避免的大量工作和定制开发。
这就是 Angular Material 的用武之地!:-)
Angular Material 是一个令人惊叹的 Angular 组件套件,它基于 Material Design(Google 的 UI 开发标准)。
使用 Angular Material,您可以快速为您的应用程序提供典型的类 Android Material Design 外观和感觉,只需向您的应用程序添加一些组件和样式。
此外,您永远不必开发自己的日期选择器和许多其他常用组件,一切都从项目开始就可用。
这些都是非常高质量的组件,已经在数以千计的应用程序中进行了广泛的测试,包括可用性、用户友好性和响应能力。
这些由 Google 自己开发的组件是一些最高质量的 UI 组件,您可以选择这些组件来构建您的应用程序,并且从您的项目的第一天起就可以使用它们。
课程大纲
在本课程中,我们将使用 Angular Material 从头开始构建一个示例 Angular 应用程序。
我们将首先设置应用程序的菜单结构,然后我们将使用常用的容器组件(如选项卡容器)在屏幕上显示一些数据,我们将应用一些 Material Design 原则。
然后,我们将学习如何使用一些最常用的表单控件,例如输入和文本区域、日期选择器、下拉菜单、单选按钮和复选框,以及其他常用的表单组件。
我们将使用 Angular Material 构建一个复杂的表单,并展示如何正确显示表单控件错误。然后,我们将学习如何使用 Material 数据表格组件来显示表格数据,包括如何添加就地可编辑表格和可扩展表格行。
我们将展示如何对数据表中的数据进行分页,并在数据加载时向用户显示加载指示器。
我们还将详细介绍一个非常常用的功能,即对话框,并讨论何时使用它们以及何时不使用它们,并讨论一些有用的最佳实践。
然后我们将介绍Angular Material 套件中一些最高级的组件,包括它强大的拖放功能、Angular Material 的响应式设计能力,我们还将详细介绍如何使用材料树组件。
我们将学习如何使用虚拟滚动处理大量数据,我们将通过学习如何创建您自己的自定义主题来完成课程。
目录
本课程将讨论以下主题:
- 从头开始设置 Angular Material
- 导航和容器、侧边菜单、选项卡容器
- 用卡片显示数据,使用一些按钮
- 常用的表单控件和按钮 – 创建课程表单
- 输入和文本区域
- 单选按钮、复选框、工具提示
- 日期选择器,日期/时间格式
- 显示表单错误
- 角度数据表深入
- 可编辑的内联表
- 可展开的表格行
- 分页和加载指示器
- 叠加层,使用它们的最佳实践
- 拖放
- 使用 mat-grid-list 的响应式设计
- 响应断点观察者
- 树组件
- 虚拟滚动——处理大量数据
- 自定义主题
- 在运行时切换主题
您将在本课程中学到什么?
在本课程结束时,您会非常自如地使用 Angular Material 库来构建和设计您的应用程序。
您将知道如何将 Angular Material 添加到现有的 Angular 应用程序,并且您将熟悉它的大多数更常用的组件,以及许多最高级的组件。
看看下面的课程免费课程,请享受课程!
此课程面向哪些人:
- 希望深入了解 Angular 材料库的开发人员