JogoShugh/controllers.coffee

## controllers.coffee
# Utilities
copy = (from, to, propertiesToCopy) ->
  for property in propertiesToCopy
		to[property] = from[property]

# Module setup
@Menu = angular.module 'Menu', []

# Routing
@Menu.config ($routeProvider) ->
	$routeProvider.when('/menu/:meal', {
		templateUrl: 'partials/menu.html'
		controller: 'RouteController'
	}).otherwise({
		redirectTo: '/menu/breakfast'
	})

# Controllers
@MenuController = ($scope, $rootScope, $http) ->
	$rootScope.navLinks = [
		text: 'Breakfast'
		meal: 'breakfast'
	,
		text: 'Lunch'
		meal: 'lunch'
	,
		text: 'Dinner'
		meal: 'dinner'
	]

	$http.get('data/mealMenus.json').success (data) ->
		$rootScope.mealMenus = data

	$rootScope.getMenuFor = (meal) ->
		if @mealMenus[meal]?
			return @mealMenus[meal]
		else
			menu = @mealMenus.default
			menu.name = meal
			return menu

@RouteController = ($scope, $rootScope, $routeParams) ->
	meal = $routeParams.meal
	$scope.menu = meal
	meal = $rootScope.getMenuFor(meal)
	copy meal, $scope, ['name', 'headings', 'items']

## index.html
<!doctype html>
<html lang="en" ng-app="Menu">
<head>
  <meta charset="utf-8">
  <title>Let's Eat!</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-responsive.css">
  <link rel="stylesheet" href="css/responsive-tables.css">
  <script src="lib/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="MenuController">
<nav class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <ul class="nav">
        <li ng-repeat="navLink in navLinks"><a href="#/menu/{{navLink.meal}}">{{navLink.text}}</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container-fluid" style="margin-top:50px">
  <div class="row-fluid">
    <div class="span8">
      <ng-view></ng-view>
    </div>
    <div class="span4" style="background:#fcfcfc">
      Place ads or other things here!
    </div>
  </div>
</div>
</body>
</html>

## mealMenus.json
{
"default": {
  "headings": ["Item", "Price", "Calories"],
  "items": [
    {
      "item": "Hamburger",
      "price": 6.75,
      "calories": 475
    }, {
      "item": "Chicken Sandwich Plate",
      "price": 9.45,
      "calories": 587
    }, {
      "item": "Kalebone Roast Sandwich",
      "price": 7.50,
      "calories": 355
    }
  ]
},
"lunch": {
  "name": "Lunch",
  "headings": ["Item", "Price", "Calories"],
  "items": [
    {
      "item": "Jamburger",
      "price": 6.75,
      "calories": 975
    }, {
      "item": "Lichen Sandwich Plate",
      "price": 1.45,
      "calories": 197
    }, {
      "item": "Sailbone Toast Sandwich",
      "price": 4.50,
      "calories": 855
    }
  ]
},
"breakfast": {
  "name": "Breakfast",
  "headings": ["Item", "Price", "Calories"],
    "items": [
      {
        "item": "Scrambled Eggs",
        "price": 2.75,
        "calories": 375
      }, {
        "item": "Scrambled Tofu",
        "price": 3.50,
        "calories": 400
      }, {
        "item": "Home Fries",
        "price": 3.00,
        "calories": 250
      }
    ]
  }
}

## menu.html
<h2>{{name}} menu</h2>
<div class="responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th ng-repeat="heading in headings">{{heading}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items">
        <td data-title="Name">{{item.item}}</td>
        <td data-title="Price">${{item.price}}</td>
        <td data-title="Calories">{{item.calories}}</td>
      </tr>
    </tbody>
  </table>
</div>

## responsive-tables.css
@media only screen and (max-width: 800px) {
  /* Force table to not be like tables anymore */
	.responsive table,
	.responsive thead,
	.responsive tbody,
	.responsive th,
	.responsive td,
	.responsive tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.responsive thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.responsive tr { border: 1px solid #ccc; }

	.responsive td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
		white-space: normal;
		text-align:left;
	}

	.responsive td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}

	/*
	Label the data
	*/
	.responsive td:before { content: attr(data-title); }
}
	# Utilities
	copy = (from, to, propertiesToCopy) ->
	for property in propertiesToCopy
	to[property] = from[property]

	# Module setup
	@Menu = angular.module 'Menu', []

	# Routing
	@Menu.config ($routeProvider) ->
	$routeProvider.when('/menu/:meal', {
	templateUrl: 'partials/menu.html'
	controller: 'RouteController'
	}).otherwise({
	redirectTo: '/menu/breakfast'
	})

	# Controllers
	@MenuController = ($scope, $rootScope, $http) ->
	$rootScope.navLinks = [
	text: 'Breakfast'
	meal: 'breakfast'
	,
	text: 'Lunch'
	meal: 'lunch'
	,
	text: 'Dinner'
	meal: 'dinner'
	]

	$http.get('data/mealMenus.json').success (data) ->
	$rootScope.mealMenus = data

	$rootScope.getMenuFor = (meal) ->
	if @mealMenus[meal]?
	return @mealMenus[meal]
	else
	menu = @mealMenus.default
	menu.name = meal
	return menu

	@RouteController = ($scope, $rootScope, $routeParams) ->
	meal = $routeParams.meal
	$scope.menu = meal
	meal = $rootScope.getMenuFor(meal)
	copy meal, $scope, ['name', 'headings', 'items']
	<!doctype html>
	<html lang="en" ng-app="Menu">
	<head>
	<meta charset="utf-8">
	<title>Let's Eat!</title>
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/bootstrap-responsive.css">
	<link rel="stylesheet" href="css/responsive-tables.css">
	<script src="lib/angular/angular.js"></script>
	<script src="js/controllers.js"></script>
	</head>
	<body ng-controller="MenuController">
	<nav class="navbar navbar-fixed-top">
	<div class="navbar-inner">
	<div class="container-fluid">
	<ul class="nav">
	<li ng-repeat="navLink in navLinks"><a href="#/menu/{{navLink.meal}}">{{navLink.text}}</a></li>
	</ul>
	</div>
	</div>
	</nav>
	<div class="container-fluid" style="margin-top:50px">
	<div class="row-fluid">
	<div class="span8">
	<ng-view></ng-view>
	</div>
	<div class="span4" style="background:#fcfcfc">
	Place ads or other things here!
	</div>
	</div>
	</div>
	</body>
	</html>
	{
	"default": {
	"headings": ["Item", "Price", "Calories"],
	"items": [
	{
	"item": "Hamburger",
	"price": 6.75,
	"calories": 475
	}, {
	"item": "Chicken Sandwich Plate",
	"price": 9.45,
	"calories": 587
	}, {
	"item": "Kalebone Roast Sandwich",
	"price": 7.50,
	"calories": 355
	}
	]
	},
	"lunch": {
	"name": "Lunch",
	"headings": ["Item", "Price", "Calories"],
	"items": [
	{
	"item": "Jamburger",
	"price": 6.75,
	"calories": 975
	}, {
	"item": "Lichen Sandwich Plate",
	"price": 1.45,
	"calories": 197
	}, {
	"item": "Sailbone Toast Sandwich",
	"price": 4.50,
	"calories": 855
	}
	]
	},
	"breakfast": {
	"name": "Breakfast",
	"headings": ["Item", "Price", "Calories"],
	"items": [
	{
	"item": "Scrambled Eggs",
	"price": 2.75,
	"calories": 375
	}, {
	"item": "Scrambled Tofu",
	"price": 3.50,
	"calories": 400
	}, {
	"item": "Home Fries",
	"price": 3.00,
	"calories": 250
	}
	]
	}
	}
	@media only screen and (max-width: 800px) {
	/* Force table to not be like tables anymore */
	.responsive table,
	.responsive thead,
	.responsive tbody,
	.responsive th,
	.responsive td,
	.responsive tr {
	display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.responsive thead tr {
	position: absolute;
	top: -9999px;
	left: -9999px;
	}

	.responsive tr { border: 1px solid #ccc; }

	.responsive td {
	/* Behave like a "row" */
	border: none;
	border-bottom: 1px solid #eee;
	position: relative;
	padding-left: 50%;
	white-space: normal;
	text-align:left;
	}

	.responsive td:before {
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 6px;
	left: 6px;
	width: 45%;
	padding-right: 10px;
	white-space: nowrap;
	text-align:left;
	font-weight: bold;
	}

	/*
	Label the data
	*/
	.responsive td:before { content: attr(data-title); }
	}