Angular Rates App ES6 Harmony

Eample of generating rates. ES6/Harmony version using Traceur compiler

by dingen2010

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>    
<script type="module">
    var app = angular.module('rateApp', []);

    app.value('hours', [40, 45, 50]);
    
    app.value('times', [['Weekly',1], ['Monthly',4], ['Yearly (48 Weeks)',48]]);
    
    app.value('rates', Array.from(new Array(30), (x,i) => 60 + 5*i));

    class Controller {

        constructor(hours, rates, times) {
            this.hours = hours;
            this.rates = rates;
            this.times = times;
            this.hourRow = this.times
                .map(t => this.hours.map(h => h))
                .reduce((a,b)=>a.concat(b));
        }  
    
        rows(rate) {
            return this.times
                    .map(t => this.hours
                        .map(h => t[1] * h * rate))
                    .reduce((a,b) => a.concat(b));
        }
    }

    app.controller('rateCtrl', ['hours', 'rates', 'times', Controller]);
    
    angular.bootstrap(document.getElementById('rateApp'), ['rateApp']);
</script>
<div id="rateApp" class="container" ng-controller="rateCtrl as ctrl">
    <div class="h2">Rates</div>
    <hr/>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>&nbsp;</th>
                    <th ng-repeat="time in ::ctrl.times" class="h3 text-center" colspan="3">{{::time[0]}}</th>
                </tr>
                <tr>
                    <th class="h3">Rate</th>
                    <th ng-repeat="hour in ::ctrl.hourRow track by $index" class="h4 text-center">{{::hour}}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="rate in ::ctrl.rates">
              ...