Angular Material 是一个为 AngularJS 应用程序提供 Material Design 风格的 UI 组件库。它为开发人员提供了一组完整的、可重用的 UI 组件，可以通过 AngularJS 模块的形式嵌入到应用程序中。这些组件包括按钮、卡片、工具栏、图标、表单控件等等，可以在开发过程中大大缩短实现时间，提高代码的可重用性和可维护性。
安装和配置
首先，需要在项目中安装 Angular Material。可以使用 npm 安装：
npm install angular-material --save
然后，在项目中引入 Angular Material 的样式文件和脚本文件：
<!-- AngularJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> <!-- Angular Material --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.js"></script>
接下来，在 AngularJS 应用程序的初始化代码中，需要将 ngMaterial 模块注入到应用程序中：
angular.module('myApp', ['ngMaterial']);使用组件
按钮
Angular Material 提供了多种类型的按钮，包括扩展按钮、浮动操作按钮、图标按钮等等。下面是一个简单的示例：
<md-button class="md-raised md-primary">Primary Button</md-button> <md-button class="md-raised md-accent">Accent Button</md-button> <md-button class="md-fab md-primary"><md-icon class="material-icons">add</md-icon></md-button>
卡片
卡片是一种常用的 UI 元素，Angular Material 也提供了卡片组件。下面是一个简单的示例：
-- -------------------- ---- -------
---------
---------------
--------------------
----- ------------------------ ------------
----- ----------------------- ---------------
---------------------
----------------
-----------------
------- ------- ---- ---------
------------------
-----------------
----------------- -------------
----------------- -------------
------------------
----------工具栏
工具栏是一种常用的导航元素，Angular Material 提供了多种类型的工具栏，包括常规工具栏、浮动工具栏、固定工具栏等。下面是一个简单的示例：
-- -------------------- ---- -------
----------- -------------------------
---- -------------------------
---------- ---------------------- ------------------
-------- -------------------------------------
------------
----------- ----------
----- ------------
---------- ---------------------- --------------------
-------- ---------------------------------------
------------
------
-------------图标
Angular Material 提供了一组内置的 Material Design 风格图标，可以通过 md-icon 组件添加到应用程序中。下面是一个简单的示例：
<md-icon class="material-icons">face</md-icon>
总结
本文介绍了如何正确地使用 Angular Material，包括安装和配置，以及一些常用的 UI 组件的使用方法。使用 Angular Material 可以大大减少代码量，加快开发速度，同时提高代码的可维护性和可重用性。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502777295b1f8cacdfbf389