Angular material

by Aakash Khapare M

HTML

<script src="https://code.angularjs.org/1.4.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.1.8/svg-morpheus.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <md-content>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <md-button class="md-icon-button" aria-label="Settings" ng-click="toggleLeft()">
                    <md-icon>
                        <ng-md-icon icon="menu"></ng-md-icon>
                    </md-icon>
                </md-button>
                 <h2>
          <span>Toolbar with Icon Buttons</span>
        </h2>
 <span flex></span>

                <md-button class="md-icon-button" aria-label="Favorite">
                    <md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
                </md-button>
                <md-button class="md-icon-button" aria-label="More">
                    <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
                </md-button>
            </div>
        </md-toolbar>
    </md-content>
    <md-sidenav class="md-sidenav-right 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">Sidenav Left</h1>

        </md-toolbar>
        <md-content layout-padding...

JavaScript

//Angular material example
angular.module('myApp', ['ngMaterial', 'ngMdIcons'])
    .controller('myCtrl', ['$scope', '$mdSidenav', '$mdUtil', function ($scope, $mdSidenav, $mdUtil) {
    $scope.toggleLeft = buildToggler('left');
    $scope.toggleRight = buildToggler('right');
    function buildToggler(navID) {
        var debounceFn = $mdUtil.debounce(function () {
            $mdSidenav(navID)
                .toggle()
                .then(function () {
                console.log("toggle " + navID + " is done");
            });
        }, 200);
        return debounceFn;
    }
}]).controller('LeftCtrl', ['$scope', '$mdSidenav', function ($scope, $mdSidenav) {
    $scope.close = function () {
        $mdSidenav('left').close()
            .then(function () {
            console.log("close LEFT is done");
        });
    };
}]);