JSFiddle - React, Tailwind, and code Playground

by Jay Zelenkov

HTML

<script src="//code.angularjs.org/1.5.0/angular.min.js"></script>
<h2>HELLO WORLD!</h2>
<div ng-controller="CountCtrl as vm">
  <counter count="vm.count"></counter>
</div>

CSS

body {
  background: #eee;
  margin: 0;
  padding: 25px;
}

JavaScript

angular
  .module('Todo', [])
  .controller('CountCtrl', function CountCtrl() {
    this.count = 4;
  })
  .directive('counter', function counter() {
    return {
      scope: {},
      bindToController: {
        count: '='
      },
      controller: function() {
        function increment() {
          this.count++;
        }

        function decrement() {
          this.count--;
        }
        this.increment = increment;
        this.decrement = decrement;
      },
      controllerAs: 'counter',
      template: ['<div class="todo">',
        '<h2>HELLO AGAIN!</h2>',
        '<input type="text" ng-model="counter.count">',
        '<button type="button" ng-click="counter.increment()">+</button>',
        '<button type="button" ng-click="counter.decrement()">-</button>',
        '</div>'
      ].join('')
    }
  });

document.addEventListener('DOMContentLoaded', function() {
  angular.bootstrap(document, ['Todo']);
});