Angular Counter App

by Amy Ruddy

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div class='mainContent'>
  <div class='container py-5' ng-app="counterApp" ng-controller="counterController">
    <div class='bg-white rounded shadow p-3 mx-auto'>
      <h1>Angular Counter</h1>
      <p>This is a simple example of an Angular counter.</p>

      <p>Current count: <strong>{{ count }}</strong></p>

      <button ng-click="count = count + 1" class='btn btn-dark'>Increment</button>
      <button ng-click="count = 0" class='btn btn-outline-dark'>Reset</button>
    </div>
  </div>
</div>

CSS

.mainContent,
html,
body {
  background-color: #e62a39;
}

.bg-white {
  max-width: 400px;
}

p {
  font-size: 1.1rem;
}

strong {
  color: #e62a39;
}

TypeScript

var app = angular.module('counterApp', []);
app.controller('counterController', function($scope) {
    $scope.count = 0;
});