Re: AngularJS vs Ember

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="container" ng-app='mymodule' ng-controller='RootCtrl'>

    <script type="text/ng-template" id="vote.html">
        <div class=vote>
            <a ng-click='expanded=false' ng-show='expanded && vote=="U"'>Collapse</a>
            <div ng-show='expanded' ng-transclude></div>
            <button class="btn" ng-click='expanded=true' ng-show='!expanded'>
                <i class='icon-question'></i> Sounds bad
            </button>
            <button ng-class='{bad: bad, btn: 1}'
                    ng-click='cast("E")' ng-show='expanded'>
                <i class='icon-thumbs-down'></i> Ditch Angular, use Ember
            </button>
            <button class="btn" ng-click='cast("U")' ng-show=expanded>
                <i class='icon-question'></i> Hard to tell
            </button>
            <button ng-class="{btn: 1, good: good}" ng-click='cast("A")'>
                <i class='icon-thumbs-up'></i> Nah, Angular is OK
            </button>
        </div>
    </script>

    <div class="row">
        <h1>Re: AngularJS vs Ember</h1>

        <p>There's been an interesting article circulated on HN with a pretentious title</p> <pre><a href='http://eviltrout.com/2013/06/15/ember-vs-angular-its-not-even-close.html'>AngularJS vs Ember: It's not even close</a></pre>

        <p>According to its author, Ember won by a wide margin.</p>
        <h2>Why Care?</h2>
        <p>Several MV* frameworks are gaining traction these days. Angular, Ember and Knockout are arguably the most popular.</p>
        <p>jQuery is way past its due date, and developers are ready to move on. What should we move to is an open question.</p>
        <p>Angular works pretty well for me, but it is not perfect. It's great that people are trying to scrutinize its design, compare...

CSS

div.container.ng-scope {
    max-width: 940px;
}

.vote {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 4px 0 16px;
    padding: 8px;
}

button.btn {
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
    background-image: none;
}

button.btn.good {
    background-color: #7aba7b;
}

button.btn.bad {
    background-color: #fbbf69;
}

JavaScript

angular.module('mymodule', [])
    .directive('vote', function () {
        return {
            restrict: 'E',
            transclude: true,
            scope: {},
            replace: true,
            templateUrl: 'vote.html',
            controller: function($scope, $rootScope) {
                $scope.voteId = $rootScope.allocateId();
                $scope.cast = function(x) {
                    $rootScope.votes[$scope.voteId] = x;
                    $scope.bad = (x == 'E');
                    $scope.good = (x == 'A');
                    $scope.vote = x;
                    //$scope.expanded = false;
                }
                $scope.cast('U');
            }
        };
    }).controller('RootCtrl', function($scope, $rootScope) {
        var nextId = 1;
        $rootScope.allocateId = function() {
            return nextId++;
        };
        $rootScope.votes = {};
        $rootScope.count = function(x) {
            var res = 0;
            Object.keys($rootScope.votes).forEach(function(k) {
                if ($rootScope.votes[k] == x) {
                    res++;
                }
            });
            return res;
        };
    });