介绍
cg-material是一个基于Angular Material的UI库，提供了一系列的组件和指令，能够快速、方便的在AngularJS项目中使用。cg-material采用npm作为包管理工具，并且支持Bower。
安装
安装cg-material前，需要确保已经安装好了Node.js和npm。
使用npm安装
在命令行中执行以下命令：
npm install cg-material --save
使用Bower安装
在命令行中执行以下命令：
bower install cg-material --save
使用
为了使用cg-material，需要通过模块的方式将其引入到项目中。在app.js文件中添加以下代码：
angular.module('myApp', ['cgMaterial']);引入cgMaterial模块后，就可以在HTML代码中使用cg-material中提供的组件和指令了。例如，在controller中增加以下代码：
angular.module('myApp')
.controller('myController', function($scope) {
$scope.items = [
{name: 'Item 1'},
{name: 'Item 2'},
{name: 'Item 3'}
];
});在HTML中使用cg-material的组件：
<md-list>
<md-list-item ng-repeat="item in items">
{{item.name}}
</md-list-item>
</md-list>这段代码会生成一个列表，包含三个元素。
常用组件和指令
md-button
md-button指令可以很方便地创建一个按钮。示例代码：
<md-button>Click me!</md-button>
md-checkbox
md-checkbox指令可以很方便地创建一个多选框。示例代码：
<md-checkbox ng-model="isChecked"> Checkbox </md-checkbox>
md-radio-button
md-radio-button指令可以很方便地创建一个单选框。示例代码：
<md-radio-button ng-model="selectedOption" value="option1"> Option 1 </md-radio-button> <md-radio-button ng-model="selectedOption" value="option2"> Option 2 </md-radio-button>
md-input-container
md-input-container指令可以很方便地包装一个输入框。示例代码：
<md-input-container> <label>Username</label> <input type="text" ng-model="username"> </md-input-container>
md-select
md-select指令可以很方便地创建一个下拉框。示例代码：
<md-select ng-model="selectedOption"> <md-option value="option1">Option 1</md-option> <md-option value="option2">Option 2</md-option> </md-select>
结束语
cg-material提供了许多方便的指令和组件，能够快速、方便地在AngularJS项目中使用。通过本文所介绍的内容，你应该已经能够掌握基本的使用方法，进一步深入学习请参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb781e8991b448da3ce