使用 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 教程：具有新功能的新功能