konsumer/index.html

## index.html
<!DOCTYPE html>
<html ng-app="minApp">
    <head>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.min.js"></script>
          <script src="angular-layout.min.js"></script>
          <link rel="stylesheet" href="angular-layout.css"/>
          <style>
            [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
                display: none !important;
            }

            html, body {
                width: 100%;
                height: 100%;
                margin:0;
                padding:0;
                font-family: sans-serif;
            }

            #header article {
                text-align:right;;
            }

            #header > * {
                padding: 10px;
            }

            footer {
                background: #000;
                color: #fff;
                text-align:center;
                padding: 10px;
            }

            #root, #view{
                height: 100%;
                overflow:hidden;
            }

            #content {
                background: yellow;
                color: #000;
                padding: 10px;
                height: 100%;
            }

            #column1 > *, #column2> *, #column3> * {
                padding: 10px;
            }

            #column1 {
                background: blue;
                color: #fff;
            }

            #column2 {
                background: red;
                color: #fff;
            }

            #column3 {
                background: green;
                color: #fff;
            }

          </style>
    </head>
    <body ng-cloak>
        <vbox gap="0" id="root">
            <hbox id="header" align-items="center">
                <h1 flex="1">Test App</h1>
                <article flex="1">
                    other info
                </article>
            </hbox>
            <ng-view id="view" flex="1"></ng-view>
            <footer >
                FOOTER
            </footer>
        </vbox>
    </body>
    <script>
    angular.module('minApp', ['ngRoute','ng.layout'])
        .config(function($routeProvider) {
            $routeProvider
            .when('/', {
                templateUrl: 'main.html'
            })
            .otherwise({
                redirectTo: '/'
            });
        })
    </script>
</html>

## main.html
<hbox>
    <vbox id="column1" flex="1" align-items="center">
        <div flex="1">0</div>
        <div flex="1">1</div>
        <div flex="1">2</div>
        <div flex="1">3</div>
        <div flex="1">4</div>
    </vbox>

    <vbox id="column2" flex="1" align-items="center">
        <div flex="1">0</div>
        <div flex="1">1</div>
        <div flex="1">2</div>
        <div flex="1">3</div>
        <div flex="1">4</div>
    </vbox>

    <vbox id="column3" flex="1" align-items="center">
        <div flex="1">0</div>
        <div flex="1">1</div>
        <div flex="1">2</div>
        <div flex="1">3</div>
        <div flex="1">4</div>
    </vbox>
</hbox>
<div id="content" flex="1">Some content here.</div>
	<!DOCTYPE html>
	<html ng-app="minApp">
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.min.js"></script>
	<script src="angular-layout.min.js"></script>
	<link rel="stylesheet" href="angular-layout.css"/>
	<style>
	[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
	display: none !important;
	}

	html, body {
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
	font-family: sans-serif;
	}

	#header article {
	text-align:right;;
	}

	#header > * {
	padding: 10px;
	}

	footer {
	background: #000;
	color: #fff;
	text-align:center;
	padding: 10px;
	}

	#root, #view{
	height: 100%;
	overflow:hidden;
	}

	#content {
	background: yellow;
	color: #000;
	padding: 10px;
	height: 100%;
	}

	#column1 > , #column2> , #column3> * {
	padding: 10px;
	}

	#column1 {
	background: blue;
	color: #fff;
	}

	#column2 {
	background: red;
	color: #fff;
	}

	#column3 {
	background: green;
	color: #fff;
	}

	</style>
	</head>
	<body ng-cloak>
	<vbox gap="0" id="root">
	<hbox id="header" align-items="center">
	<h1 flex="1">Test App</h1>
	<article flex="1">
	other info
	</article>
	</hbox>
	<ng-view id="view" flex="1"></ng-view>
	<footer >
	FOOTER
	</footer>
	</vbox>
	</body>
	<script>
	angular.module('minApp', ['ngRoute','ng.layout'])
	.config(function($routeProvider) {
	$routeProvider
	.when('/', {
	templateUrl: 'main.html'
	})
	.otherwise({
	redirectTo: '/'
	});
	})
	</script>
	</html>
	<hbox>
	<vbox id="column1" flex="1" align-items="center">
	<div flex="1">0</div>
	<div flex="1">1</div>
	<div flex="1">2</div>
	<div flex="1">3</div>
	<div flex="1">4</div>
	</vbox>

	<vbox id="column2" flex="1" align-items="center">
	<div flex="1">0</div>
	<div flex="1">1</div>
	<div flex="1">2</div>
	<div flex="1">3</div>
	<div flex="1">4</div>
	</vbox>

	<vbox id="column3" flex="1" align-items="center">
	<div flex="1">0</div>
	<div flex="1">1</div>
	<div flex="1">2</div>
	<div flex="1">3</div>
	<div flex="1">4</div>
	</vbox>
	</hbox>
	<div id="content" flex="1">Some content here.</div>