AngularJS Example

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="facts">
  <fact-display />
</div>

JavaScript

class FactDisplay {
  constructor() {
    this.count = 0;
    this.fact = "0 is the start";
  }

  increment() {
    this.count++;
    this.getFact().then((fact) => {
      this.fact = fact;
    });
  }

  getFact() {
    return fetch('https://api.icndb.com/jokes/random')
      .then((resp) => resp.json())
      .then((data) => data.value.joke);
  }
}

const template = `
  <div>Count: {{$ctrl.count}}</div>
  <div>
  	<button ng-click="$ctrl.increment()">Next</button>
  </div>
  <div>{{$ctrl.fact}}</div>
`;

angular.module('facts', [])
  .component('factDisplay', {
    controller: FactDisplay,
    template,
  });