在前端开发中，ng-material 是一个非常有用的 npm 包，它提供了丰富的 Material Design 风格的组件，可以快速构建出漂亮的前端页面。本篇文章将详细介绍 ng-material 的使用方法，并通过示例代码加深您的理解。
什么是 ng-material？
ng-material 是一个 AngularJS 框架下的 Material Design 框架，通过它，我们可以使用类似 Android Material Design 风格的组件来构建我们的前端页面。ng-material 现在由 Angular Material 接管并维护，提供了许多稳定的组件和样式。
安装 ng-material
要使用 ng-material，我们需要先将其安装到我们的项目中。我们可以通过 npm 命令来安装 ng-material：
npm install angular-material --save
引入 ng-material
在我们的 AngularJS 项目中引入 ng-material 是非常简单的，只需要在我们的 index.html 文件中，引入 ng-material 的 js 和 css 文件即可：
-- -------------------- ---- -------
------
------
----- ---------------- --------------------------------------------------------------
-------
------
------- ---------------------------------------------------
------- -------------------------------------------------------------------
------- -------------------------------------------------------------
------- ---------------------------------------------------------------------
------- ---------------------------------------------------------------------
-------
-------在引入了 ng-material 后，我们就可以在我们的模块中使用 ngMaterial 模块了：
angular.module('myApp', ['ngMaterial']);ng-material 组件的使用
ng-material 提供许多 Material Design 风格的组件，下面我们将介绍其中一些常用的组件的使用方法，包括：
- Button 按钮
- Input 输入框
- Select 下拉框
- Radio 单选框
- Checkbox 多选框
- Slider 滑动条
- Progress 进度条
- Dialog 对话框
Button 按钮
在 ng-material 中，我们可以使用 md-button 来创建一个 Material Design 风格的按钮，示例代码如下：
<md-button class="md-raised md-primary"> 点我 </md-button>
其中，class 属性可以控制按钮的样式，本示例中，我们使用了 md-raised 和 md-primary 两个样式。
Input 输入框
ng-material 的输入框样式也非常漂亮，我们可以使用 md-input-container 来创建一个输入框，示例代码如下：
<md-input-container> <label>用户名</label> <input type="text" ng-model="username"> </md-input-container>
注意，我们使用了 ng-model 来绑定输入框的值到我们的控制器中。
Select 下拉框
使用 ng-material 的下拉框也非常容易，我们可以使用 md-select 来创建一个 Material Design 风格的下拉框，示例代码如下：
<md-input-container>
<label>城市</label>
<md-select ng-model="selectedCity">
<md-option ng-repeat="city in cities" value="{{city.value}}">
{{city.label}}
</md-option>
</md-select>
</md-input-container>其中，我们需要定义一个 cities 数组来控制下拉框的选项。
Radio 单选框
ng-material 的单选框也非常易用，我们可以使用 md-radio-group 和 md-radio-button 来创建一个 Material Design 风格的单选框，示例代码如下：
<md-radio-group ng-model="selectedColor"> <md-radio-button value="red">红色</md-radio-button> <md-radio-button value="green">绿色</md-radio-button> <md-radio-button value="blue">蓝色</md-radio-button> </md-radio-group>
其中，我们需要使用 ng-model 来绑定选中的值到我们的控制器中。
Checkbox 多选框
ng-material 的多选框非常容易使用，我们可以使用 md-checkbox 来创建一个 Material Design 风格的多选框，示例代码如下：
<md-checkbox ng-model="checked"> 我同意用户协议 </md-checkbox>
注意，我们使用了 ng-model 来绑定多选框的值到我们的控制器中。
Slider 滑动条
使用 ng-material 的滑动条也非常简单，我们可以使用 md-slider 来创建一个 Material Design 风格的滑动条，示例代码如下：
<md-slider ng-model="value" min="0" max="100" aria-label="slider"> </md-slider>
其中，我们通过 min 和 max 属性来控制滑动条的范围，通过 aria-label 属性来控制滑动条的标签。
Progress 进度条
ng-material 的进度条也非常漂亮，我们可以使用 md-progress-circular 来创建一个 Material Design 风格的圆形进度条，示例代码如下：
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
其中，我们需要使用 md-mode 属性来控制进度条的模式，本例中使用了 indeterminate 模式。
Dialog 对话框
ng-material 的对话框（Dialog）也非常容易使用，我们可以使用 md-dialog 来创建一个 Material Design 风格的对话框，示例代码如下：
-- -------------------- ---- -------
----------------- - ------------ -
----------------
----------- -----------------
------------ --------------
------- -------------------------------
------------ ---
-------------------------
----------- -----------------------
--
--
-------- ------------------------ ---------- -
----------- - ---------- -
-----------------
--
------------- - ---------- -
-------------------
--
------------- - ---------------- -
-----------------------
--
-在这里，我们使用了 $mdDialog 服务来弹出对话框，需要注意的是，我们需要先通过 templateUrl 属性指定对话框中的 html 模板，再通过 controller 属性来指定对应的控制器。
结语
通过本文的介绍，相信大家也可以轻松地使用 ng-material 来构建 Material Design 风格的前端页面了。ng-material 提供的组件非常丰富，本文介绍了其中一些常用的组件，大家可以根据自己的需要来选择使用。如果您还有其他问题或需要更详细的介绍，可以使用 ng-material 的官方文档进行深入了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005586d81e8991b448d5a6b