AngularJS: Material Design Demo - 5

by John Tucker

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/angular/bower-material/v0.9.8-rc1/angular-material.css">
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div class="container" layout="column" ng-controller="Controller as controller">
    <md-toolbar class="md-whiteframe-z1" hide show-gt-lg>
        <div class="md-toolbar-tools">
            <h2>Desktop Toolbar</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="controller.toolbar()"> 
                <md-icon md-font-set="material-icons">today</md-icon>
            </md-button>    
        </div>        
    </md-toolbar>
    <div layout="row" flex>
        <md-sidenav 
            class="md-sidenav-left md-whiteframe-z2"
            md-component-id="left"
            md-is-locked-open="$mdMedia('gt-lg')">
            <md-toolbar class="md-tall md-whiteframe-z1 md-hue-3">
            </md-toolbar>
            <md-list>
                <md-list-item ng-click="controller.one()">
                    <md-icon md-font-set="material-icons">today</md-icon>
                    <p>one</p>
                </md-list-item>
                <md-list-item ng-click="controller.two()">
                    <md-icon md-font-set="material-icons">games</md-icon>
                    <p>two</p>
                </md-list-item>
                <md-list-item ng-click="controller.three()">
                    <md-icon md-font-set="material-icons">star rate</md-icon>
                    <p>three</p>
                </md-list-item>
            </md-list>
        </md-sidenav>
        <div layout="column" flex>
              <md-toolbar class="md-whiteframe-z1" hide-gt-lg>
                <div...

CSS

.container {
    height: 100%;
}

.content {
    padding: 16px;
}

@media all and (min-width: 600px) {
    .content {
        padding: 24px;
    }
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<style>

JavaScript

// app.module.js
(function() {
    angular
        .module('app', ['ngMaterial'])
        .config(theming)
        .controller('Controller', Controller);
    
    theming.$inject = ['$mdThemingProvider'];
    function theming($mdThemingProvider) {
          $mdThemingProvider.theme('default')
          .primaryPalette('blue')
          .accentPalette('pink')
          .warnPalette('red')
          .backgroundPalette('orange');
            
    }
    Controller.$inject = ['$mdSidenav'];
    function Controller($mdSidenav) {
        var vm = this;
        vm.openLeftSideNav = openLeftSideNav;
        vm.toolbar = toolbar;
        vm.one = one;
        vm.two = two;
        vm.three = three;
        function openLeftSideNav() {
            $mdSidenav('left').toggle();
        }
        function toolbar() {
            console.log('toolbar');
        }
        function one() {
            console.log('one');
        }
        function two() {
            console.log('one');
        }
        function three() {
            console.log('one');
        }
    }
})();