hooptie45/Angular-Material-Muppet-App.markdown

## Angular-Material-Muppet-App.markdown

      
    Raw
  

              Angular-Material-Muppet-App.markdown
            
          
    Angular Material Muppet App

The goal of this app is to show basic Angular.js Material Design components in action together. It can also be used as a starting point if you're looking to try things out.
Forked from Marcy Sutton's Pen Angular Material Basic App.
A Pen by Captain Anonymous on CodePen.
License.

  
## index.html
<html lang="en" ng-app="MuppetApp">
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
  </head>
  <body layout="column" ng-controller="AppCtrl">
    <md-toolbar layout="row">
      <button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn">
        <span class="visuallyhidden">Menu</span>
      </button>
      <h1 class="md-toolbar-tools" layout-align-gt-sm="center">My Favorite Muppets</h1>
    </md-toolbar>
    <div layout="row" flex class="content-wrapper">
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
          <md-list class="muppet-list">
            <md-item ng-repeat="it in muppets">
              <md-item-content>
                <md-button ng-click="selectMuppet(it)" ng-class="{'selected' : it === selected }">
                  <img ng-src="{{it.iconurl}}" class="face" alt="">
                  {{it.name}}
                </md-button>
              </md-item-content>
            </md-item>
          </md-list>
        </md-sidenav>
        <div layout="column" flex class="content-wrapper" id="primary-col">
            <md-content layout="column" flex class="md-padding">
              <h2>{{selected.name}}</h2>
              <p>{{selected.content}}</p>
              <div class="cell">
                <img ng-src="{{selected.imgurl}}" alt="{{selected.imgalt}}">
              </div>
            </md-content>
        </div>
    </div>
    <!-- Angular Material Dependencies -->
    <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.8.3/angular-material.js"></script>
  </body>
</html>

## script.js
var app = angular.module('MuppetApp', ['ngMaterial']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', 'muppetService', '$timeout','$log', function($scope, $mdSidenav, muppetService, $timeout, $log) {
  var allMuppets = [];

  $scope.selected = null;
  $scope.muppets = allMuppets;
  $scope.selectMuppet = selectMuppet;
  $scope.toggleSidenav = toggleSidenav;

  loadMuppets();

  //*******************
  // Internal Methods
  //*******************
  function loadMuppets() {
    muppetService.loadAll()
      .then(function(muppets){
        allMuppets = muppets;
        $scope.muppets = [].concat(muppets);
        $scope.selected = $scope.muppets[0];
      })
  }

  function toggleSidenav(name) {
    $mdSidenav(name).toggle();
  }

  function selectMuppet(muppet) {
    $scope.selected = angular.isNumber(muppet) ? $scope.muppets[muppet] : muppet;
    $scope.toggleSidenav('left');
  }
}])


app.service('muppetService', ['$q', function($q) {
  var muppets = [{
      name: 'Animal',
      iconurl: 'https://lh3.googleusercontent.com/-KGsfSssKoEU/AAAAAAAAAAI/AAAAAAAAAC4/j_0iL_6y3dE/s96-c-k-no/photo.jpg',
      imgurl: 'http://muppethub.com/wp-content/uploads/2014/02/Animal-7.png',
      content: 'Animal is the wild and frenzied drummer of Dr. Teeth and The Electric Mayhem, the fictional band from The Muppet Show. He is one of the Muppets originally created by Michael K. Frith.'
  }, {
      name: 'Fozzie Bear',
      iconurl: 'https://yt3.ggpht.com/-cEjxni3_Jig/AAAAAAAAAAI/AAAAAAAAAAA/cMW2NEAUf-k/s88-c-k-no/photo.jpg',
      imgurl: 'http://i.ytimg.com/vi/x-OdqmzkuRg/maxresdefault.jpg',
      content: 'Fozzie Bear is a Muppet character created by Jim Henson and developed by Frank Oz. Fozzie is an orange-brown, fozzie bear who often wears a brown pork pie hat and a red-and-white polka-dot necktie. The character debuted on The Muppet Show, as the show\'s stand-up comic, a role where he constantly employed his catchphrase, "Wocka Wocka Wocka!". Shortly after telling the joke, he was usually the target of ridicule, particularly from balcony hecklers Statler and Waldorf.'
  }, {
      name: 'The Swedish Chef',
      iconurl: 'https://goingforwardblog.files.wordpress.com/2013/01/swedish-chef.jpg',
      imgurl: 'http://muppetmindset.files.wordpress.com/2012/02/8ff4c-ms_sc_05.jpg',
      content: 'The Swedish Chef is a Muppet character that appeared on The Muppet Show. He was originally performed by Jim Henson and Frank Oz simultaneously, with Henson performing the head and voice and Oz performing the character\'s live hands. The Swedish Chef is now performed by Bill Barretta.'
  }, {
      name: 'Cookie Monster',
      iconurl: 'https://lh5.googleusercontent.com/-c5rVqhf66e4/UVIKJ3fXLFI/AAAAAAAAACU/s-TU4ER7-Ro/w800-h800/kimmie.jpg',
      imgurl: 'http://bakadesuyo.bakadesuyo.netdna-cdn.com/wp-content/uploads/2013/12/ways-to-increase-willpower.jpg',
      content: 'Cookie Monster is a Muppet on the long running children\'s television show Sesame Street. He is best known for his voracious appetite and his famous eating phrases: "Me want cookie!", "Me eat cookie!", and "Om nom nom nom" (said through a mouth full of food). He often eats anything and everything, including danishes, donuts, lettuce, apples, bananas, as well as normally inedible objects. However, as his name suggests, his preferred food is cookies. Chocolate chip cookies are his favorite kind; oatmeal cookies are his second favorite.'
  }];

  // Promise-based API
  return {
      loadAll: function() {
          // Simulate async nature of real remote calls
          return $q.when(muppets);
      }
  };
}]);

## style.css
.menuBtn {
  background-color: transparent;
  border: none;
  height: 38px;
  margin: 16px 0 0 16px;
  width: 36px;
}

md-toolbar h1 {
  font-weight: 500;
}

.muppet-list .md-button {
  color: inherit;
  font-weight: 500;
  text-align: left;
  width: 100%;
}

.muppet-list .selected {
  color: #03a9f4;
}

.face {
  border-radius: 30px;
  border: 1px solid #ddd;
  display: inline-block;
  margin: 4px 16px;
  vertical-align: middle;
  width: 48px;
}

.content-wrapper {
  position: relative;
}

#primary-col {
  overflow: hidden;
}

#primary-col .md-button {
  margin: 8px auto 16px 0;
}

#primary-col .cell {
  flex: 1 1 auto;
}

#primary-col img {
  display: block;
  max-width: 100%;
}
/* Utils */

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/* Using Data-URI converted from svg until <md-icon> becomes available
https://github.com/google/material-design-icons
*/

.menuBtn {
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IkhlYWRlciI+CiAgICA8Zz4KICAgICAgICA8cmVjdCB4PSItNjE4IiB5PSItMjIzMiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPgogICAgPC9nPgo8L2c+CjxnIGlkPSJMYWJlbCI+CjwvZz4KPGcgaWQ9Ikljb24iPgogICAgPGc+CiAgICAgICAgPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgICAgICAgPHBhdGggZD0iTTMsMThoMTh2LTJIM1YxOHogTTMsMTNoMTh2LTJIM1YxM3ogTTMsNnYyaDE4VjZIM3oiIHN0eWxlPSJmaWxsOiNmM2YzZjM7Ii8+CiAgICA8L2c+CjwvZz4KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPgogICAgPGcgZGlzcGxheT0iaW5saW5lIj4KICAgIDwvZz4KPC9nPgo8L3N2Zz4=) no-repeat center center;
}
	<html lang="en" ng-app="MuppetApp">
	<head>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
	<meta name="viewport" content="initial-scale=1" />
	</head>
	<body layout="column" ng-controller="AppCtrl">
	<md-toolbar layout="row">
	<button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn">
	<span class="visuallyhidden">Menu</span>
	</button>
	<h1 class="md-toolbar-tools" layout-align-gt-sm="center">My Favorite Muppets</h1>
	</md-toolbar>
	<div layout="row" flex class="content-wrapper">
	<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
	<md-list class="muppet-list">
	<md-item ng-repeat="it in muppets">
	<md-item-content>
	<md-button ng-click="selectMuppet(it)" ng-class="{'selected' : it === selected }">
	<img ng-src="{{it.iconurl}}" class="face" alt="">
	{{it.name}}
	</md-button>
	</md-item-content>
	</md-item>
	</md-list>
	</md-sidenav>
	<div layout="column" flex class="content-wrapper" id="primary-col">
	<md-content layout="column" flex class="md-padding">
	<h2>{{selected.name}}</h2>
	<p>{{selected.content}}</p>
	<div class="cell">
	<img ng-src="{{selected.imgurl}}" alt="{{selected.imgalt}}">
	</div>
	</md-content>
	</div>
	</div>
	<!-- Angular Material Dependencies -->
	<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.8.3/angular-material.js"></script>
	</body>
	</html>
	var app = angular.module('MuppetApp', ['ngMaterial']);

	app.controller('AppCtrl', ['$scope', '$mdSidenav', 'muppetService', '$timeout','$log', function($scope, $mdSidenav, muppetService, $timeout, $log) {
	var allMuppets = [];

	$scope.selected = null;
	$scope.muppets = allMuppets;
	$scope.selectMuppet = selectMuppet;
	$scope.toggleSidenav = toggleSidenav;

	loadMuppets();

	//*******************
	// Internal Methods
	//*******************
	function loadMuppets() {
	muppetService.loadAll()
	.then(function(muppets){
	allMuppets = muppets;
	$scope.muppets = [].concat(muppets);
	$scope.selected = $scope.muppets[0];
	})
	}

	function toggleSidenav(name) {
	$mdSidenav(name).toggle();
	}

	function selectMuppet(muppet) {
	$scope.selected = angular.isNumber(muppet) ? $scope.muppets[muppet] : muppet;
	$scope.toggleSidenav('left');
	}
	}])


	app.service('muppetService', ['$q', function($q) {
	var muppets = [{
	name: 'Animal',
	iconurl: 'https://lh3.googleusercontent.com/-KGsfSssKoEU/AAAAAAAAAAI/AAAAAAAAAC4/j_0iL_6y3dE/s96-c-k-no/photo.jpg',
	imgurl: 'http://muppethub.com/wp-content/uploads/2014/02/Animal-7.png',
	content: 'Animal is the wild and frenzied drummer of Dr. Teeth and The Electric Mayhem, the fictional band from The Muppet Show. He is one of the Muppets originally created by Michael K. Frith.'
	}, {
	name: 'Fozzie Bear',
	iconurl: 'https://yt3.ggpht.com/-cEjxni3_Jig/AAAAAAAAAAI/AAAAAAAAAAA/cMW2NEAUf-k/s88-c-k-no/photo.jpg',
	imgurl: 'http://i.ytimg.com/vi/x-OdqmzkuRg/maxresdefault.jpg',
	content: 'Fozzie Bear is a Muppet character created by Jim Henson and developed by Frank Oz. Fozzie is an orange-brown, fozzie bear who often wears a brown pork pie hat and a red-and-white polka-dot necktie. The character debuted on The Muppet Show, as the show\'s stand-up comic, a role where he constantly employed his catchphrase, "Wocka Wocka Wocka!". Shortly after telling the joke, he was usually the target of ridicule, particularly from balcony hecklers Statler and Waldorf.'
	}, {
	name: 'The Swedish Chef',
	iconurl: 'https://goingforwardblog.files.wordpress.com/2013/01/swedish-chef.jpg',
	imgurl: 'http://muppetmindset.files.wordpress.com/2012/02/8ff4c-ms_sc_05.jpg',
	content: 'The Swedish Chef is a Muppet character that appeared on The Muppet Show. He was originally performed by Jim Henson and Frank Oz simultaneously, with Henson performing the head and voice and Oz performing the character\'s live hands. The Swedish Chef is now performed by Bill Barretta.'
	}, {
	name: 'Cookie Monster',
	iconurl: 'https://lh5.googleusercontent.com/-c5rVqhf66e4/UVIKJ3fXLFI/AAAAAAAAACU/s-TU4ER7-Ro/w800-h800/kimmie.jpg',
	imgurl: 'http://bakadesuyo.bakadesuyo.netdna-cdn.com/wp-content/uploads/2013/12/ways-to-increase-willpower.jpg',
	content: 'Cookie Monster is a Muppet on the long running children\'s television show Sesame Street. He is best known for his voracious appetite and his famous eating phrases: "Me want cookie!", "Me eat cookie!", and "Om nom nom nom" (said through a mouth full of food). He often eats anything and everything, including danishes, donuts, lettuce, apples, bananas, as well as normally inedible objects. However, as his name suggests, his preferred food is cookies. Chocolate chip cookies are his favorite kind; oatmeal cookies are his second favorite.'
	}];

	// Promise-based API
	return {
	loadAll: function() {
	// Simulate async nature of real remote calls
	return $q.when(muppets);
	}
	};
	}]);
	.menuBtn {
	background-color: transparent;
	border: none;
	height: 38px;
	margin: 16px 0 0 16px;
	width: 36px;
	}

	md-toolbar h1 {
	font-weight: 500;
	}

	.muppet-list .md-button {
	color: inherit;
	font-weight: 500;
	text-align: left;
	width: 100%;
	}

	.muppet-list .selected {
	color: #03a9f4;
	}

	.face {
	border-radius: 30px;
	border: 1px solid #ddd;
	display: inline-block;
	margin: 4px 16px;
	vertical-align: middle;
	width: 48px;
	}

	.content-wrapper {
	position: relative;
	}

	#primary-col {
	overflow: hidden;
	}

	#primary-col .md-button {
	margin: 8px auto 16px 0;
	}

	#primary-col .cell {
	flex: 1 1 auto;
	}

	#primary-col img {
	display: block;
	max-width: 100%;
	}
	/* Utils */

	.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	}
	/* Using Data-URI converted from svg until <md-icon> becomes available
	https://github.com/google/material-design-icons
	*/

	.menuBtn {
	background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IkhlYWRlciI+CiAgICA8Zz4KICAgICAgICA8cmVjdCB4PSItNjE4IiB5PSItMjIzMiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPgogICAgPC9nPgo8L2c+CjxnIGlkPSJMYWJlbCI+CjwvZz4KPGcgaWQ9Ikljb24iPgogICAgPGc+CiAgICAgICAgPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgICAgICAgPHBhdGggZD0iTTMsMThoMTh2LTJIM1YxOHogTTMsMTNoMTh2LTJIM1YxM3ogTTMsNnYyaDE4VjZIM3oiIHN0eWxlPSJmaWxsOiNmM2YzZjM7Ii8+CiAgICA8L2c+CjwvZz4KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPgogICAgPGcgZGlzcGxheT0iaW5saW5lIj4KICAgIDwvZz4KPC9nPgo8L3N2Zz4=) no-repeat center center;
	}