Angular Material 教程

2025年3月17日 | 阅读 3 分钟

Angular Material 是 Google 在 2014 年开发的 UI 库组件。 它专门为 AngularJS 开发人员设计。 它有助于以结构化的方式设计应用程序。 它的组件有助于构建有吸引力、一致且功能强大的网页和 Web 应用程序。 它用于创建响应更快、速度更快的网站。

Angular Material Tutorial

它可以吸引用户并访问我们应用程序中存在的元素或组件。 它还有助于以独特的样式和形状设计我们的应用程序。

这些组件使应用程序或网站更加一致并具有响应式设计。 它将成功设计的经典原则与创新和技术相结合。

Google 在 2014 年开发了 Angular Material。当时,它被标记为 AngularJS,以使应用程序更具吸引力并提高性能。 Google 从头开始重新编写了代码并删除了 JS,然后在 2016 年 9 月将其命名为 Angular Material。UI/UX 组件被称为 Angular Material。

Angular Material 的特性

  • 它是一种内置的响应式设计。
  • Angular Material 具有标准的 CSS。
  • 新版本的 UI 组件,即按钮复选框文本字段,用于遵循 Angular Material Design 的概念。
  • 它具有特殊的功能,例如卡片、工具栏、速度拨盘、侧边导航、滑动、侧边导航等等。
  • 它是一个跨平台浏览器,用于创建 Web 组件。

响应式设计

  • Angular Material 具有响应式设计,因此其网站可以适应任何尺寸。
  • Material 创建的网站与 Android、iPhone、平板电脑笔记本电脑兼容。

可扩展

  • 很容易添加新的 CSS 规则来覆盖现有的 CSS
  • 它支持阴影和颜色。
  • Angular Material 中的颜色和阴影是统一的。
  • Angular Material 可以免费使用。

高质量

  • 每个人都可以访问 Angular Material 组件。它经过许多参数的测试,以确保应用程序的性能和可靠性。
  • 它具有直接的 API,具有一致的跨平台行为。

多功能

  • 它提供的工具可以帮助开发人员使用通用模式构建其自定义组件。
  • 它在界限内是可定制的。

无摩擦

  • 它由 Angular 团队构建,可以完美集成。
  • 我们可以使用 Angular Material 从头开始设计新应用程序,也可以在现有应用程序中使用。

AngularJS 与 Angular

Angular Material 库是一个稳定的产品,可以随时使用。 开发人员应注意,AngularJS Material 适用于 AngularJS 1.x。 AngularJS 1.x 现在处于长期支持 (LTS) 模式。

Angular Material 和组件开发工具包 (CDK) 库(适用于 Angular v2+)将在 Angular Components GitHub 存储库中找到。
当前的开发工作主要集中在可访问性、性能小幅增强错误修复上。

最新的 Material Design

最新的 Material Design 更新于 2018 年 5 月在 Google 发布。

长期支持

AngularJS Material 已进入长期支持 (LTS) 阶段,该阶段将于 2021 年 12 月 31 日结束。该日期与 AngularJS LTS 阶段一致。

然后,我们专注于修复库的 1.2.x 分支中的错误,该错误至少满足以下标准之一

  • 我们收到或检测到经过验证的安全漏洞报告。
  • 浏览器发布了一个版本,该版本将阻止当前生产应用程序工作。
  • jQuery 库发布了一个版本,该版本阻止当前生产应用程序工作。

如果我们验证了一个新的安全漏洞,AngularJS Material 1.1.x 将获得一个新版本。

浏览器支持

AngularJS Material 通常支持属于以下类别的浏览器

  • 全球使用率大于 0.5%
  • Evergreen 浏览器的最后两个主要版本
  • Firefox ESR
  • 不被认为是“已死”的浏览器

前提条件

在继续本教程之前,您必须具备 Angular JS、HTML、CSS、JavaScript文档对象模型 (DOM) 的基本知识。 此外,如果您了解基于 Web 的应用程序的工作原理,这将有所帮助。

目标受众

本教程对想要学习 Angular Material 的基础知识并使用引人入胜的组件创建响应式网站的初学者和专业人士都很有帮助。 本教程解释了 Angular Material 的主要概念。

问题

我们保证您在本 Java 教程中不会遇到任何问题。 但是,如果出现任何错误,请在联系表格中发布问题。