AngularJS: Material Design Demo - 4

by pankaj agrawal

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" ng-controller="Controller as controller">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <md-button class="md-icon-button">
                <md-icon md-font-set="material-icons">menu</md-icon>
            </md-button>
            <h2>Toolbar with Icon Buttons</h2>
        </div>
    </md-toolbar>
    <md-content>
        <md-button>Button</md-button>
        <md-button class="md-primary">Primary</md-button>
        <md-button class="md-raised">Button</md-button>
        <md-button class="md-primary md-raised">Primary</md-button>
        <md-button class="md-icon-button">
            <md-icon md-font-set="material-icons">menu</md-icon>
        </md-button><br />
        <md-input-container>
            <label>Title1</label>
            <input ng-model="user.title" />
        </md-input-container>
        <rzslider rz-slider-model="vm.slider.value"
          rz-slider-options="vm.slider.options"></rzslider>
    </md-content>
</div>

CSS

</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('indigo')
          .accentPalette('pink')
          .warnPalette('red')
          .backgroundPalette('grey');
            
    }
    function Controller() {
        var vm = this;
        vm.slider = { //requires angular-bootstrap to display tooltips
  value: 5,
  options: {
    floor: 0,
    ceil: 10,
    showTicks: true,
    ticksTooltip: function(v) {
      return 'Tooltip for ' + v;
    }
  }
};
    }
})();