使用 Angular Material 构建超现代的 Web 应用程序

已发表: 2022-03-11

在 2014 年的 Google I/O 大会上，Google 宣布了他们的新设计语言 Material Design。此后，他们已将许多流行的应用程序转换为遵守这一新规范，以提供一致的体验。现在他们正试图说服你也跟随。

什么是材料设计？

在访问了官方的 Material Design 规范后，您会立即感受到超现代的极简主义。基本形状和纯色是这里的主题。浏览文档是一种很好的体验。我建议你自己看看，但我会在这里总结一下。

目标

目的是创造一种视觉语言，将优秀设计的经典原则与技术和科学的创新和可能性相结合。还开发一个单一的底层系统，允许跨各种平台和设备尺寸的统一体验。

原则

Material Design 建立在三个原则之上。

材料是隐喻

受纸和墨水研究的启发，这些材料生活在 3D 空间中，并以触觉现实为基础。它通过使用逼真的阴影给人一种空间的错觉。纸质材料必须遵守物理定律（即两张纸不能相互穿过），但可能会取代物理世界（即一张纸可能会增长或缩小）。

粗体、图形、故意

深思熟虑的颜色选择、边缘到边缘的图像、大规模的排版和有意的留白创造了一个大胆的图形界面，让用户沉浸在体验中。浮动操作按钮或 FAB 是这一原则的一个典型例子。您是否注意到您的 Google Inbox 应用中漂浮着带有“加号”符号的小圆圈？ Material Design 非常明显地表明这是一个重要的按钮。

运动提供意义

运动是有意义和适当的，有助于集中注意力并保持连续性。反馈微妙而清晰。转换是有效的但连贯的。这里的要点是仅在有目的时才进行动画制作，而不是过度。

AngularJS 如何融入 Material Design？

AngularJS 是 Google 的“超级英雄 JavaScript MVW 框架”，它解决了开发单页应用程序 (SPA) 时遇到的许多挑战。它提供了创建连接到 API 并且永远不需要刷新页面的现代 Web 应用程序所需的框架。

AngularJS：一种新方法

如果它是为应用程序设计的，那么 Angular 就是 HTML 本来的样子。 HTML 是用于静态文档的一种很好的声明性语言，但创建动态应用程序的意义不大。

使用 HTML 创建动态应用程序一直是一种欺骗浏览器做它不应该做的事情的练习。有几种方法可以做到这一点。

库 - 功能的集合。 (jQuery)
框架 - 代码在需要时动态填充静态元素。（杜兰达尔，余烬）

Angular 采用不同的方法来解决这个问题。它没有为给出的 HTML 苦苦挣扎，而是创建了新的 HTML 结构。 Angular 通过一种称为“指令”的结构向浏览器教授新的 HTML 语法。 Angular 内置了一组这些指令，但也允许您创建自定义指令，因此它允许您编写自己的 HTML 元素。

如果 Google 基于 Material Design 原则创建了一组指令，那不是很好吗？

介绍角材料

Google 正在积极开发 Angular Material，这是 AngularJS 中 Material Design 的一种实现。 Angular Material 提供了一组基于 Material Design 系统的可重用 UI 组件。 Angular Material 由几个部分组成。它有一个用于排版和其他元素的 CSS 库，它提供了一种有趣的 JavaScript 主题化方法，它的响应式布局使用了 flex 网格。但 Angular Material 最吸引人的特性是其惊人的指令集合。

入门

我创建了一个开源项目来帮助你启动下一个 Angular Material 项目。这个项目的目的是举例说明 Angular Material 必须提供的一切，所有这些都在一个屋檐下。导航、分页、主题和整个指令集合都已准备就绪，您所要做的就是输入数据并将其绑定到 HTML。

在此处查看演示或在 GitHub 上 fork 代码。

指令

指令是 Angular 的核心功能。 Angular 附带了几个你一直使用的指令，比如 ng-model 或 ng-repeat。它们是 Angular 的一个非常重要的部分，它使框架发挥应有的作用。

如何使用 Angular 材质指令

Angular Material 用一组漂亮的 Material Design 启发指令扩展了这个指令库。 Angular Material 指令是以 'md' 开头的 HTML 标签；材料设计的缩写。它们使用起来再简单不过了。例如，让我们看一下好旧的按钮。

一个标准的 HTML 按钮可能看起来像这样。

 <button>Click Me</button>

Angular Material 按钮看起来像这样。

 <md-button>Click Me</md-button>

这就是制作材质按钮所需的全部内容。现在，该指令还有其他几个可用选项，例如对其进行主题化并将其从表面提升以暗示重要性。

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

服务

服务也是 Angular 功能的核心。它们用于跨应用程序共享代码。 Angular 应用程序中的数据调用使用并重用了像 $http 这样的通用核心服务。

角服务是：

延迟实例化——Angular 仅在应用程序组件依赖于它时实例化服务。
单例——依赖于服务的每个组件都获得对服务工厂生成的单个实例的引用。

如何使用 Angular 材质服务

Angular Material 附带了一些为应用程序提供一些额外功能的服务。它们还有助于某些指令的执行。服务的一个很好的例子是“吐司”。

Toast 是从屏幕顶部滑入并在几秒钟后消失的小通知。使用这项服务很容易。

在 JavaScript 中，

 $mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

这个例子展示了一个简单的 toast，它在屏幕左下方弹出并在 3 秒后撤退。

一些服务可以使用自定义模板进行个性化。在这种情况下，$mdToast 服务可以通过使用 md-toast 指令来使用自定义 HTML 模板。

主题化

Material Design 是一种视觉语言，主题通过颜色、色调和对比度来传达意义。这些主题在整个应用程序的组件中表达，以提供更统一的感觉。

根据 Material Design 指南，您必须“通过从主调色板中选择三种色调和从辅助调色板中选择一种强调色来限制您的颜色选择。” Angular Material 通过使用 JavaScript 来配置主题，使遵循此指南变得简单。但首先，什么是调色板和色调？

色调：色调是调色板中的单一颜色。
调色板：调色板是色调的集合。

例如，调色板将是“绿色”，而色调是特定的绿色阴影。 Angular Material 随附了 Material Design 规范中的所有有效调色板。您可以在此处了解有关有效调色板的更多信息。

配置主题

为您的项目设置主题是小菜一碟。在 app.js 文件中，使用 Theming Provider 服务设置所需的调色板和色调。

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

使用主题

要将主题应用于组件，请将元素的类设置为所需的调色板和色调。

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

布局

Flexbox 是响应式设计的最新和最伟大的补充，Angular Material 随附于其中。如果您熟悉 Bootstrap 网格系统，那么您应该能够快速掌握。事实上，Bootstrap 正在其即将发布的版本中切换到 Flexbox。它具有您已经习惯的熟悉的行和列布局，但还有更多。通过本教程了解如何使用 Flexbox 或学习官方文档。

前 9 个最佳 Angular 材料指令

Angular Material 指令太多，无法全部列出，所以我想与您分享我的最爱。

9. 线性进展

通常在 SPA 中，页面需要时间从服务器加载数据。如果在此期间应用程序显示空白页，用户可能会认为应用程序已损坏并会离开。让用户知道正在使用 Progress Linear 指令加载数据。当用户看到动画进度条指示正在发生某些事情时，他们就会知道要等待。或者，将 Progress Circular 指令用于圆形指示器。

8. 日期选择器

日期选择器指令使选择日期对用户来说是一种干净、简单的体验，也是一种真正的单行书写。只需使用 md-datepicker 并可选择使用 md-min-date 和 md-max-date 限制范围，仅此而已。

7.自动完成

自动完成通过帮助用户选择选项来提供愉快的用户体验。这就是使 Google 的搜索引擎成为最佳的原因。 Autocomplete 指令通过在用户键入时完成用户的单词来将此功能添加到您的应用程序中。但是这个指令最好的部分是定制。通过使用 md-item-template 填充您的自动完成功能，您可以为建议赋予更多意义。例如，如果用户在公司中搜索名称，自动完成功能可以显示匹配的名称及其图片和公司角色，从而提供更强大的用户体验。

6. 底片

底部表格是一个小菜单，从屏幕底部向上滑动，覆盖内容并获得焦点。最初旨在仅用于移动设备的底部面板在大屏幕上越来越受欢迎。要使用它，请使用 md-bottom-sheet 创建一个模板，其中分别包含用于网格布局或列表布局的 md-grid 或 md-list。然后使用底部工作表服务 $mdBottomSheet.show() 调用它。

5.输入

输入表单很无聊，并且自互联网诞生以来就一直如此。但他们不必是！使用 Input 指令给你的输入一些天赋。用 md-input-container 包装你的输入标签，然后看着它变得栩栩如生。观看您的占位符动画成浮动标签。通过即时但微妙的颜色变化和警告消息轻松验证您的输入。输入指令采用一个预计会很无聊的元素并提供一个惊喜。

4.吐司

最糟糕的用户体验是不知道应用程序在做什么。我们通过烤面包机或不显眼的通知来缓解这种恶化。在过去，当我们向服务器发送请求时，我们会在该页面上等待，直到响应返回才可以继续。从那以后，用户的注意力范围急剧下降。在今天的 SPA 中，我们单击一个按钮并期望立即移动，在服务器响应到来时处理它。 Toast 指令使这变得轻而易举。只需使用 Toast 服务 $mdToast.show() 并设置文本、持续时间和出现的角落即可召唤烤面包机。使用 md-toast 制作您自己的自定义烤面包机。

3.网格列表

你的名单缺乏活力吗？网格列表是标准列表视图的替代方案。网格列表最适合呈现图像，并针对视觉理解进行了优化。它通过在网格上放置不同大小的瓷砖来工作，给人一种分散、不拘一格的感觉。平铺大小和布局然后响应屏幕大小。这个指令肯定会给你的应用程序一个令人兴奋和有趣的外观。

2.白框

空间概念是Material Design及其纸上隐喻的核心。在相同 z 位置（或深度）的两张纸形成一个接缝，并且必须一起移动。两张重叠的纸，具有不同的 z 位置，形成一个台阶。它们彼此独立移动。为了遵循设计，我们必须能够沿 z 轴移动元素。 Angular Material 提供了一种简单的方法来做到这一点。使用 Whiteframe 指令，将类设置为 md-whiteframe-z{x}，其中 x 是从背景向上的深度单位。数字越大，纸张投下的阴影越大。

1. Sidenav

创建侧导航菜单从未如此简单。 Sidenav 指令将导航菜单放置在屏幕的左侧或右侧。牢记移动设备，它可以按预期滑入和滑出，或者通过单击按钮以编程方式进行。一个很好的补充是锁打开功能。当屏幕达到一定尺寸时，可以将侧边导航设置为锁定打开。通过设置参数 md-is-locked-open=”$mdMedia('gt-sm')” 菜单将隐藏在手机上，但在平板电脑和更大的平板电脑上锁定打开。

结论

谷歌正在将他们最受欢迎的应用程序转换为 Material Design。现在他们正在领导 Angular Material 的开发，这是一种用 AngularJS 编写的 Material Design 实现。 Material Design 使用了纸上的隐喻、大胆的意图和有意义的动作。 AngularJS 组织单页应用程序。 Angular Material 将 Material Design 原则应用于 AngularJS 应用程序。

材料设计就在这里，Angular Material 是将材料设计规范应用到您的单页应用程序的绝佳方式。如果您想创建自己的 Angular Material 应用程序，请不要浪费时间从头开始。相反，从一个功能齐全的应用程序开始，其中包含指令演示、已设置主题、导航和路由准备就绪。在此处查看演示或在 GitHub 上 fork 代码。当然，您也可以通过访问官方文档了解有关 Angular Material 的所有信息。

您如何看待我挑选的最佳 Angular Material 指令？我说对了吗？你最喜欢什么？

相关： Angular 6 教程：具有新功能的新功能