问题很简单。我如何获得角度材料的工具栏和sidenavbar，以便我可以使用ui-router获取视图。 下面是我的工作代码，我还希望按钮在较小的显示器上切换侧面菜单。如果你可以引导我阅读https://material.angularjs.org/以外的文档，我将非常感谢。
<!DOCTYPE html>
<html lang="en" ng-app="training">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>iTraining</title>
<link href="libs/bower_components/angular-material/angular-material.css" rel="stylesheet">
<link href="libs/bower_components/fontawesome/css/font-awesome.min.css" rel="stylesheet">
<link href="libs/bower_components/angular-loading-bar/src/loading-bar.css" type="text/css" rel="stylesheet">
<!-- <link href='http://fonts.googleapis.com/css?family=Roboto:400,300italic,500,700' rel='stylesheet' type='text/css'>-->
<link href="assets/css/template.css" rel="stylesheet" type="text/css">
<link href="assets/css/override.css" rel="stylesheet" type="text/css">
</head>
<body layout="row" ng-controller="appCtrl">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">
<a ng-href="/" layout="row" flex>
<div class="docs-logotype">Material Design</div>
</a>
</h1>
</md-toolbar>
<md-content class="md-padding" >
<md-button ng-click="close()" class="md-primary" hide-gt-md>
</md-button>
<p hide-md show-gt-md>
This sidenav is locked open on your device. To go back to the default behavior,
narrow your display.
</p>
</md-content>
</md-sidenav>
<div flex>
<md-content>
<md-toolbar>
<h2 class="md-toolbar-tools">
<span>Toolbar</span>
</h2>
</md-toolbar>
</md-content>
<md-content>
<div ui-view></div>
</md-content>
</div>
<script src="libs/bower_components/angular/angular.min.js"></script>
<script src="libs/bower_components/angular/angular-animate.min.js"></script>
<script src="libs/bower_components/angular/angular-aria.min.js"></script>
<script src="libs/bower_components/angular-material/angular-material.min.js"></script>
<script src="libs/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="libs/bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controller.js"></script>
<script src="scripts/service.js"></script>
<script src="scripts/factory.js"></script>
</body>
</html>
控制器
var app = angular.module('training',['ui.router','ngAnimate','ngAria','ngMaterial','angular-loading-bar']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.tpl.html"
})
.state('signin', {
url: "/signin",
templateUrl: "views/user/signin.tpl.html",
controller: 'userCtrl'
})
.state('signup', {
url: "/signup",
templateUrl: "views/user/signup.tpl.html",
controller: 'userCtrl'
});
});
app.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeSpinner = false;
}])
app.controller('appCtrl', function($scope, $mdSidenav) {
$scope.openLeftMenu = function() {
$mdSidenav('left').toggle();
};
});
为什么我会收到此警告
ARIA: Attribute " aria-label ", required for accessibility, is missing on node: button.md-primary.md-button.md-default-themeaccessKey: ""attributes: NamedNodeMapautofocus: falsebaseURI: "http://localhost/newtraining/"childElementCount: 0childNodes: NodeList[1]children: HTMLCollection[0]classList: DOMTokenList[3]className: "md-primary md-button md-default-theme"clientHeight: 0clientLeft: 0clientTop: 0clientWidth: 0contentEditable: "inherit"dataset: DOMStringMapdir: ""disabled: falsedraggable: falsefirstChild: textfirstElementChild: nullform: nullformAction: ""formEnctype: ""formMethod: ""formNoValidate: falseformTarget: ""hidden: falseid: ""innerHTML: "↵ ↵ "innerText: "↵ ↵ "isContentEditable: falselabels: NodeList[0]lang: ""lastChild: textlastElementChild: nulllocalName: "button"name: ""namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: pnextSibling: textng339: 6nodeName: "BUTTON"nodeType: 1nodeValue: nulloffsetHeight: 0offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 0onabort: nullonautocomplete: nullonautocompleteerror: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonshow: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<button class="md-primary md-button md-default-theme" ng-transclude="" ng-click="close()" hide-gt-md="" tabindex="0">↵ ↵ </button>"outerText: "↵ ↵ "ownerDocument: documentparentElement: md-content.md-padding.md-default-themeparentNode: md-content.md-padding.md-default-themeprefix: nullpreviousElementSibling: nullpreviousSibling: textscrollHeight: 0scrollLeft: 0scrollTop: 0scrollWidth: 0shadowRoot: nullspellcheck: truestyle: CSSStyleDeclarationtabIndex: 0tagName: "BUTTON"textContent: "↵ ↵ "title: ""translate: truetype: "submit"validationMessage: ""validity: ValidityStatevalue: ""webkitdropzone: ""willValidate: true__proto__: HTMLButtonElement