angularmaterial.css,angularjs - angular material css toolbar - Stack Overflow

The question is simple. How do i get the toolbar and sidenavbar of angular material so that i could get the view with ui-router.

Below is my working code and i also want the button to toggle the side menu on smaller displays. If you could guide me through documentation other than https://material.angularjs.org/ i would highly appreciate.

iTraining

Material Design

This sidenav is locked open on your device. To go back to the default behavior,

narrow your display.

Toolbar

Controller

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();

};

});

And why am i getting this warning

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: "↵ ↵ "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