Angular Fan Menu for mobile and web

Cool effects for a fan menu effect using angularjs

by Roger Sanchez

HTML

<script src="https://rawgit.com/CuppaLabs/angular-fan-menu/master/app/scripts/circularmenu-directive.js"></script>
 <div ng-app="demoApp" ng-controller="demoController">
 <div drag-circular-menu 
     angle="30" 
     placement="topLeft" 
     button-config="menuConfig" 
     menu-items="menuItems" 
     default-open="true"
     onwing-click="onWingClick1(wing)">
</div>
<h1 style="line-height: 300px;text-align: center;">
Drag the menu around
</h1>
 </div>

JavaScript

angular
  .module('demoApp', ['circularMenu-directive'])
  .controller('demoController',function($scope){
    $scope.menuConfig = {
      "buttonWidth": 60,
      "menuRadius": 160,
      "color": "#ff7f7f",
      "offset":25,
      "textColor": "#ffffff",
      "showIcons":false,
      "gutter": {
        "top": 130,
        "right": 30,
        "bottom": 30,
        "left": 30
      },
      "angles": {
        "topLeft": 0,
        "topRight": 90,
        "bottomRight": 180,
        "bottomLeft": 270
      }
    };
    $scope.menuItems = [{
      "title": "iPad",
      "color": "#ea2a29",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-tablet","size": 35}
    }, {
      "title": "iMac",
      "color": "#f16729",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-laptop","size": 30}
    }, {
      "title": "iPhone",
      "color": "#f89322",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-mobile","size": 30}
    }, {
      "title": "iWatch",
      "color": "#ffcf14",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-clock-o","size": 30}
    }];
  })