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

本文概述

什么是材料设计？
AngularJS如何适合材料设计？
AngularJS：一种新方法
Angular材料介绍
最佳9种最佳Angular材料指令
总结

在2014年的Google I / O大会上, Google宣布了其新的设计语言Material Design。此后, 他们已将许多流行的应用程序转换为遵守此新规范, 以提供一致的体验。现在他们正在努力说服你也遵循。
什么是材料设计？在访问了官方的Material Design规范之后, 你会立即感到超现代的简约。基本形状和平面颜色是这里的主题。仔细阅读文档是非常有经验的。我建议你自己看一下, 但在此将对其进行总结。
目标
目的是创建一种视觉语言, 将良好设计的经典原理与技术和科学的创新与可能性相结合。还要开发一个基础系统, 以在各种平台和设备尺寸上提供统一的体验。
原则
材料设计基于三个原则。
物质就是隐喻受纸张和墨水研究的启发, 该材料生活在3D空间中, 并以触觉现实为基础。它通过使用逼真的阴影来给人空间幻觉。纸质材料必须遵守物理定律(即两张纸不能互相穿过), 但可以取代物理世界(即纸可以生长或收缩)。
粗体, 图形, 故意精心的颜色选择, 边缘到边缘的图像, 大规模的印刷术和有意的空白区域创建了醒目的图形界面, 使用户沉浸在体验中。浮动操作按钮或FAB是此原理的主要示例。你是否注意到Google Inbox应用中有一个带有” 加号” 符号的小圆圈？材料设计非常明显, 这是一个重要的按钮。
运动提供意义动作有意义且适当, 有助于集中注意力并保持连续性。反馈微妙而清晰。过渡是高效而连贯的。这里的要点是仅在有目的的情况下进行动画处理, 而不是过度使用。
AngularJS如何适合材料设计？ Google的” 超级英雄JavaScript MVW框架” AngularJS解决了开发单页应用程序(SPA)时遇到的许多挑战。它提供了创建连接到API的现代Web应用程序所需的框架, 而无需刷新页面。
AngularJS：一种新方法如果Angular是为应用程序设计的, 那么它就是HTML。 HTML是用于静态文档的一种出色的声明性语言, 但是创建动态应用程序却不那么多。
使用HTML创建动态应用程序一直是一种诱骗浏览器执行原本不该做的事情的练习。有两种方法可以做到这一点。

库-函数的集合。 (jQuery的)
框架-代码在需要时动态填充静态元素。 (杜兰达, 灰烬)

Angular采用了不同的方法来解决此问题。它创建新的HTML结构, 而不是与给出的HTML斗争。 Angular通过称为” 指令” 的结构向浏览器教授新的HTML语法。 Angular内置了一组这些指令, 但还允许你创建自定义指令, 因此它允许你编写自己的HTML元素。
如果Google根据” 材料设计” 原则创建了一套指令, 会不会很整洁？
Angular材料介绍 Google正在积极开发Angular Material, 这是AngularJS中Material Design的实现。 Angular Material提供了一组基于Material Design系统的可重复使用的UI组件。Angular材料由几部分组成。它具有一个用于排版和其他元素的CSS库, 它提供了一种有趣的JavaScript主题化方法, 并且其响应式布局使用了flex网格。但是Angular Material最吸引人的功能是其惊人的指令集。
入门
我创建了一个开源项目, 以帮助你快速启动下一个Angular Material项目。该项目的目的是提供一个示例, 说明Angular Material必须提供的所有功能, 并且都在一个屋顶下。导航, 分页, 主题化以及整个指令集已准备就绪, 你所要做的就是输入数据并将其绑定到HTML。
在此处查看演示, 或在GitHub上添加代码。
指令
指令是Angular的核心功能。 Angular附带了你一直使用的多个指令, 例如ng-model或ng-repeat。它们是Angular的非常重要的一部分, 它可以使框架正常运行。
如何使用Angular材料指令 Angular Material用一组美丽的Material Design启发式指令扩展了该指令库。 Angular Material指令是以” md” 开头的HTML标签；材料设计的缩写。使用起来再简单不过了。例如, 让我们看一下旧按钮。
一个标准的HTML按钮可能看起来像这样。

< button> Click Me< /button>

Angular材质按钮如下所示。

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

这就是制作” 材质” 按钮所需的全部。现在, 此指令还有其他几种选择, 例如将其主题化并将其从表面提升为暗含重要性。

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

服务
服务也是Angular功能的核心。它们用于在整个应用程序之间共享代码。像$ http这样的通用核心服务已用于Angular应用程序中的数据调用, 并已重新使用。
Angular服务包括：

延迟实例化– Angular仅在应用程序组件依赖服务时才实例化服务。
单例–依赖于服务的每个组件都将引用由服务工厂生成的单个实例。

如何使用Angular材料服务 Angular Material附带了一些服务, 这些服务为应用程序提供了一些额外的功能。它们还有助于某些指令的执行。服务的一个很好的例子是” 吐司” 。
祝酒词是一个小的通知, 它从屏幕顶部滑入并在几秒钟后消失。使用此服务很容易。
在JavaScript中,

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

此示例显示了一个简单的吐司, 该吐司在屏幕的左下方弹出, 并在3秒钟后撤退。
某些服务可以使用自定义模板进行个性化设置。在这种情况下, $ mdToast服务可以通过使用md-toast指令使用自定义HTML模板。
主题化
材料设计是一种视觉语言, 主题通过颜色, 色调和对比度传达含义。这些主题在整个应用程序的各个组件中表达, 以提供更统一的感觉。

文章图片
根据” 材料设计准则” , 你必须” 通过从主调色板中选择三种颜色和从辅调色板中选择一种强调颜色来限制颜色的选择。” Angular Material通过使用JavaScript来配置主题, 使遵循本指南变得简单。但是首先, 什么是调色板和色相？

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

例如, 调色板将是” 绿色” , 而色调是绿色的特定阴影。 Angular Material随附了Material Design规范中的所有有效调色板。你可以在此处了解有关有效调色板的更多信息。
配置主题为你的项目设定主题是小菜一碟。在app.js文件中, 使用主题提供程序服务设置所需的调色板和色相。

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指令让用户知道数据正在加载。用户会看到等待进度的动画进度条指示正在发生的事情时会知道等待。或者, 对圆形指示器使用” 进度通告” 指令。

文章图片
8.日期选择器
Date Picker指令使选择日期对用户而言是一种干净, 简单的体验, 并且是真正的单行书写。只需使用md-datepicker, 然后选择将范围限制为md-min-date和md-max-date即可。

文章图片
7.自动完成
自动完成功能通过帮助用户选择选项来提供愉悦的用户体验。这就是使Google的搜索引擎最佳的原因。 “ 自动完成” 指令通过在用户键入单词时完成输入来将此功能添加到你的应用程序中。但是有关此指令的最好的部分是自定义。通过用md-item-template填充自动完成功能, 你可以为建议提供更多含义。例如, 如果用户在公司中搜索名称, 则自动完成功能可以显示匹配的名称及其图片和公司Angular色, 从而提供更可靠的用户体验。

文章图片
6.底页
底部是一个小菜单, 可从屏幕底部向上滑动, 覆盖内容并聚焦。最初旨在仅用于移动设备的底板一直在大屏幕上获得普及。要使用它, 请使用md-bottom-sheet创建一个模板, 该模板分别包含用于网格布局或列表布局的md-grid或md-list。然后使用” 底部工作表” 服务$ mdBottomSheet.show()进行调用。

文章图片
5.输入
输入形式很无聊, 并且自互联网开始以来就存在。但是他们不必如此！使用Input指令给你的输入一些天赋。用md-input-container将你的输入标签包裹起来, 看看它变成了现实。观看占位符动画化为浮动标签的过程。通过即时但细微的颜色变化和警告消息轻松验证你的输入。输入指令采用了预期会很无聊的元素, 并带来了令人惊喜的惊喜。

文章图片
4.吐司
最糟糕的用户体验是不知道应用程序在做什么。我们通过烤面包机或一些不显眼的通知来减轻这种麻烦。在过去, 当我们向服务器发送请求时, 我们在该页面上等待, 直到响应返回, 然后我们才能继续。从那以后, 用户的注意力跨度急剧下降。在当今的SPA中, 我们单击一个按钮并期望立即移动, 以处理服务器响应。 Toast指令使这成为小菜一碟。只需使用Toast服务$ mdToast.show()并设置文本, 持续时间和出现在哪个Angular落, 即可调用烤面包机。使用md-toast制作自己的自定义烤面包机。

文章图片
3.网格列表
你的清单缺少爵士乐吗？网格列表是标准列表视图的替代方法。网格列表最适合呈现图像, 并且针对视觉理解进行了优化。它通过在网格上放置不同大小的瓷砖来工作, 从而散发出折衷的感觉。然后, 磁贴大小和布局将响应屏幕大小。该指令肯定会给你的应用程序一个令人兴奋和有趣的外观。

文章图片
2.白框
空间的概念是材料设计及其纸张隐喻的核心。同一z位置(或深度)的两张纸形成接缝, 必须一起移动。具有不同z位置的两张重叠的纸形成一个台阶。它们彼此独立地运动。为了遵循设计, 我们必须能够沿z轴移动元素。Angular材料提供了一种简单的方法。使用Whiteframe指令, 将该类设置为md-whiteframe-z {x}, 其中x是从背景开始向上的深度单位。数字越大, 纸张投射的阴影越大。

文章图片
1.由于
创建侧面导航菜单从未如此简单。 Sidenav指令将导航菜单放置在屏幕的左侧或右侧。牢记移动性, 它可以按预期方式滑动或滑入, 或者通过单击按钮以编程方式滑入。锁打开功能是一个不错的补充。当屏幕达到一定尺寸时, 可以将侧面导航设置为锁定打开。通过设置参数md-is-locked-open =” $ mdMedia(‘gt-sm’)” , 菜单将隐藏在手机上, 但在平板电脑或更大尺寸的平板电脑上被锁定为打开状态。

文章图片
总结 Google正在将其最受欢迎的应用程序转换为Material Design。现在, 他们正在领导Angular Material的开发, 这是用AngularJS编写的Material Design的实现。材料设计使用纸质隐喻, 大胆的意图和有意义的动作。 AngularJS组织单页应用程序。 Angular Material将材料设计原则应用于AngularJS应用程序。
这里是Material Design, 而Angular Material是一种将Material Design规范应用于单页应用程序的绝佳方法。如果你想创建自己的Angular Material应用程序, 请不要浪费时间从头开始。而是从功能齐全的应用程序开始, 其中包含指令演示, 已设置主题, 导航和路由准备就绪。在此处查看演示, 或在GitHub上添加代码。当然, 你也可以通过访问官方文档来全面了解Angular Material。
你如何看待我选择最佳Angular Material指令？我说对了吗？你最喜欢什么？
【使用Angular Material构建超现代的Web应用】相关：Angular 6教程：具有新功能的新功能