Angular Material Dashboard

angular-material-dashboard.markdown

Angular Material Dashboard

This is a basic application template for AngularJS using the Angular Material library

A Pen by Ajay Viswanathan on CodePen.

License.

index.html

<div ng-app="App" ng-controller="AppCtrl" layout="row" layout-fill ng-cloak>
  <md-sidenav class="md-sidenav-left md-whiteframe-z2" role="sidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
    <md-toolbar class="md-tall md-hue-2" layout-align="end end">
      <div class="md-toolbar-tools" layout layout-padding>
        <md-icon>{{data.user.icon}}</md-icon>
        <div layout="column" layout-padding>
          <span class="md-body-2">{{data.user.name}}</span>
          <span class="md-caption">{{data.user.email}}</span>
        </div>
        <span flex></span>
        <md-button class="md-icon-button" aria-label="User Settings" ng-click="toast('Logout')">
          <md-icon>more_vert</md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <md-content role="navigation">
      <md-list ng-repeat="section in data.sidenav.sections">
        <md-list-item ng-click="section.expand = !section.expand">
          <p class="md-subheader md-primary">{{section.name}}</p>
          <span flex></span>
          <md-icon class="md-primary md-icon-button">{{section.expand ? 'arrow_drop_up' : 'arrow_drop_down'}}</md-icon>
        </md-list-item>
        <md-list-item ng-show="section.expand" ng-repeat="action in section.actions" ng-click="toast(action.link)">
          <md-icon>{{action.icon}}</md-icon>
          <p class="md-body-2">{{action.name}}</p>
          <span flex></span>
          <md-icon>chevron_right</md-icon>
        </md-list-item>
    </md-content>
  </md-sidenav>
  <section layout="column" role="main" flex>
    <md-toolbar role="toolbar">
      <div class="md-toolbar-tools">
        <md-button class="md-icon-button" ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu">
          <md-icon>menu</md-icon>
        </md-button>
        <h4 class="md-title">{{data.title}}</h4>
        <span flex></span>
        <md-button class="md-icon-button" ng-repeat="button in data.toolbar.buttons" aria-label={{button.name}} ng-click="toast(button.link)">
          <md-icon>{{button.icon}}</md-icon>
        </md-button>
        <md-menu md-position-mode="target-right target" ng-repeat="menu in data.toolbar.menus">
          <md-button class="md-icon-button" aria-label="{{menu.name}}" ng-click="$mdOpenMenu($event)">
            <md-icon>{{menu.icon}}</md-icon>
          </md-button>
          <md-menu-content width={{menu.width}}>
            <md-subheader>{{menu.name}}</md-subheader>
            <md-menu-item ng-repeat="action in menu.actions">
              <md-button layout-fill md-ink-ripple ng-click="toast(action.message)">
                <md-icon md-class="{{action.error ? 'md-warn' : 'md-primary'}}" md-menu-align-target>{{action.completed ? 'done' : 'hourglass_empty'}}</md-icon>
                {{action.name}}
              </md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
      </div>
    </md-toolbar>
    <section id="content" role="content" layout="column" layout-padding md-scroll-y>
      <md-content class="md-whiteframe-z2" ng-cloak>
        <md-list ng-repeat="list in data.content.lists">
          <div class="md-actions" layout layout-align="end center">
            <md-subheader class="md-no-sticky md-primary">{{list.name}}</md-subheader>
            <span flex></span>
            <md-menu md-position-mode="target-right target">
              <md-button class="md-icon-button" aria-label="{{list.menu.name}}" ng-click="$mdOpenMenu($event)">
                <md-icon class="md-primary">settings</md-icon>
              </md-button>
              <md-menu-content width={{list.menu.width}}>
                <md-subheader>{{list.menu.name}}</md-subheader>
                <md-menu-item ng-repeat="action in list.menu.actions">
                  <md-button layout-fill md-ink-ripple ng-click="toastList(action.message)">
                    <md-icon md-class="{{action.error ? 'md-warn' : 'md-primary'}}" md-menu-align-target>{{action.completed ? 'done' : 'hourglass_empty'}}</md-icon>
                    {{action.name}}
                  </md-button>
                </md-menu-item>
              </md-menu-content>
            </md-menu>
          </div>
          <md-divider></md-divider>
          <md-list-item class="md-2-line" ng-repeat="item in list.items">
            <md-checkbox ng-click="toggle(item, selected)"></md-checkbox>
            <md-content class="md-list-item-text" layout="column">
              <h3 class="md-body-2">{{item.name}}</h3>
              <p class="md-caption">{{item.description}}</p>
            </md-content>
            <span flex></span>
            <md-icon aria-label="Show Item" ng-click="toast(item.link)">chevron_right</md-icon>
          </md-list-item>
        </md-list>
      </md-content>
    </section>
  </section>
</div>

script.js

angular.module('App', [
  'ngMaterial'
]);

angular.module('App').config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default').primaryPalette('indigo');
})

angular.module('App').controller('AppCtrl', function($scope, $mdSidenav, $mdToast) {
  $scope.toggleSidenav = function(menu) {
    $mdSidenav(menu).toggle();
  }
  $scope.toast = function(message) {
    var toast = $mdToast.simple().content('You clicked ' + message).position('bottom right');
    $mdToast.show(toast);
  };
  $scope.toastList = function(message) {
    var toast = $mdToast.simple().content('You clicked ' + message + ' having selected ' + $scope.selected.length + ' item(s)').position('bottom right');
    $mdToast.show(toast);
  };
  $scope.selected = [];
  $scope.toggle = function(item, list) {
    var idx = list.indexOf(item);
    if (idx > -1) list.splice(idx, 1);
    else list.push(item);
  };
  $scope.data = {
    title: 'Dashboard',
    user: {
      name: 'Angular Ninja',
      email: '[email protected]',
      icon: 'face'
    },
    toolbar: {
      buttons: [{
        name: 'Button 1',
        icon: 'add',
        link: 'Button 1'
      }],
      menus: [{
        name: 'Menu 1',
        icon: 'message',
        width: '4',
        actions: [{
          name: 'Action 1',
          message: 'Action 1',
          completed: true,
          error: true
        }, {
          name: 'Action 2',
          message: 'Action 2',
          completed: false,
          error: false
        }, {
          name: 'Action 3',
          message: 'Action 3',
          completed: true,
          error: true
        }]
      }]
    },
    sidenav: {
      sections: [{
        name: 'Section 1',
        expand: true,
        actions: [{
          name: 'Action 1',
          icon: 'settings',
          link: 'Action 1'
        }, {
          name: 'Action 2',
          icon: 'settings',
          link: 'Action 2'
        }]
      }, {
        name: 'Section 2',
        expand: false,
        actions: [{
          name: 'Action 3',
          icon: 'settings',
          link: 'Action 3'
        }]
      }, {
        name: 'Section 3',
        expand: false,
        actions: [{
          name: 'Action 4',
          icon: 'settings',
          link: 'Action 4'
        }, {
          name: 'Action 5',
          icon: 'settings',
          link: 'Action 5'
        }, {
          name: 'Action 6',
          icon: 'settings',
          link: 'Action 6'
        }]
      }]
    },
    content: {
      lists: [{
        name: 'List 1',
        menu: {
          name: 'Menu 1',
          icon: 'settings',
          width: '4',
          actions: [{
            name: 'Action 1',
            message: 'Action 1',
            completed: true,
            error: true
          }]
        },
        items: [{
          name: 'Item 1',
          description: 'Description 1',
          link: 'Item 1'
        }, {
          name: 'Item 2',
          description: 'Description 2',
          link: 'Item 2'
        }, {
          name: 'Item 3',
          description: 'Description 3',
          link: 'Item 3'
        }]
      }]
    }
  }
});

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/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.11.2/angular-material.min.js"></script>

style.css

body {
  overflow: hidden;
  background-color: #EEEEEE;
}

md-whiteframe {
  background: #fff;
}

#content {
  padding: 24px;
}

styles

<link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />