Angular Material的使用详解

　　使用方法

　　用npm下载angular-material、angular-aria、angular-animate

　　代码如下：

　　<!DOCTYPEhtml><htmllang="en"><head>

　　<metacharset="UTF-8">

　　<title>Document</title>

　　<linkrel="stylesheet"href="node_modules/angular-material/angular-material.css"></head><bodyng-app="myApp"ng-controller="myCtrl"layout="column">

　　<md-toolbar>

　　<h3>AngularMaterial演示代码</h3>

　　</md-toolbar>

　　<divclass="container"layout="row"flex>

　　<md-sidenavmd-is-locked-open="true"class="md-whiteframe-z2">

　　<md-list>

　　<md-list-itemng-repeat="iteminarr">

　　<md-buttonng-click="toggle($index)">

　　{{item.title}}</md-button>

　　</md-list-item>

　　</md-list>

　　</md-sidenav>

　　<md-contentflexid="content"class="lightgreen"flex>

　　<h2>{{rightTitle}}</h2>

　　<p>

　　{{rightCont}}</p>

　　<md-checkboxng-model="isChecked"aria-label="Finished?">

　　Finished?</md-checkbox>

　　<md-checkboxmd-no-inkng-model="hasInk"aria-label="NoInkEffects">

　　NoInkEffects</md-checkbox>

　　<md-checkboxng-disabled="true"ng-model="isDisabled"aria-label="Disabled">

　　Disabled</md-checkbox>

　　<formname="colorForm">

　　<md-input-container>

　　<label>FavoriteColor</label>

　　<inputname="favoriteColor"ng-model="favoriteColor"required>

　　<divng-messages="colorForm.favoriteColor.$error">

　　<divng-message="required">Thisisrequired!</div>

　　</div>

　　</md-input-container></form><md-progress-circularmd-mode="determinate"value="80"></md-progress-circular><md-progress-circularmd-mode="determinate"ng-value="60"></md-progress-circular><md-progress-circularmd-mode="determinate"value="50"md-diameter="100"></md-progress-circular><md-progress-circularmd-mode="indeterminate"></md-progress-circular><md-buttonclass="md-fabmd-accent"aria-label="Play">

　　<md-tooltip>

　　PlayMusic</md-tooltip></md-button><divmd-whiteframe="3">

　　<span>Elevationof3dp</span></div>

　　</md-content>

　　</div>

　　<scriptsrc="node_modules/angular/angular.min.js"></script>

　　<scriptsrc="node_modules/angular-animate/angular-animate.min.js"></script>

　　<scriptsrc="node_modules/angular-aria/angular-aria.min.js"></script>

　　<scriptsrc="node_modules/angular-material/angular-material.js"></script>

　　varmyApp=angular.module('myApp',['ngMaterial']);

　　myApp.controller('myCtrl',['$scope',function($scope){

　　$scope.arr=[