How local businesses (including donut shops) can benefit from AngularJS

Can your local donut shop better serve customers with the help of a JavaScript framework like AngularJS? Absolutely, and here's how to do it.

If you're running a local business, your customers may want to know how much they're going to pay upfront before visiting your store. Listing individual prices is easy, but what if a customer wants a total amount for a variety of products?

You can make your customers' lives easier by building a simple calculator using AngularJS.

How to develop a calculator using AngularJS

Here's how to build a calculator to that shows how much a customer should expect to spend. For demonstration purposes, I've pretending this calculator is for a donut shop, but it could be easily repurposed for a coffee house, bakery, etc.

If you're a web developer, feel free to use the code in your own projects.

You can see a working example here: http://codepen.io/AaronTweeton/pen/jBabzv

How the calculator works

The calculator lets you select a number of different donuts, each with their own pricing. The grand total is displayed on the right. There's nothing fancy about this form, but it would be handy for your customers in a few cases:

• If a customer has a flat amount of money to spend on donuts, like $20, he or she can simply fiddle with the numbers until the total gets closer to $20, and then write down the number to order. This can save time at the donut shop since the customer doesn't have to constantly ask the clerk, "Okay, how much have I spent?"
• If you were to capture this info, you'd be able to allow customers to order donut boxes for pick-up, featuring only the donuts the customer wants. This would save customers time in line and potentially increase your sales.

How the JavaScript works

var myApp = angular.module("myApp", []);

myApp.controller("MainCtrl", function($scope) {
  /* Set the individual price per donut. */
  $scope.prices = {
    plain: .8,
    glazed: .9,
    raised: .95,
    bars: 1
  };

  /* Set values to zero. */
  $scope.plain = 0;
  $scope.glazed = 0;
  $scope.raised = 0;
  $scope.bars = 0;
  $scope.total = 0;

  $scope.calcTotal = function() {
    $scope.total = ($scope.plain * $scope.prices.plain) + ($scope.glazed * $scope.prices.glazed) + ($scope.raised * $scope.prices.raised) + ($scope.bars * $scope.prices.bars);
  }
});

If you're not familiar with JavaScript or Angular, don't worry. Here's what's going on in a nutshell:

$scope.prices = {
  plain: .8,
  glazed: .9,
  raised: .95,
  bars: 1
};

$scope.plain = 0;
$scope.glazed = 0;
$scope.raised = 0;
$scope.bars = 0;
$scope.total = 0;

All that's happening here is that we're setting the initial prices of each type of donut (e.g., $0.80 for plain, $0.90 for glazed, etc.). Then we're setting the selected number of donuts to zero when the form initially loads.

$scope.calcTotal = function() {
    $scope.total = ($scope.plain * $scope.prices.plain) +
      ($scope.glazed * $scope.prices.glazed) +
      ($scope.raised * $scope.prices.raised) + 
      ($scope.bars * $scope.prices.bars);
  }

Here we have a function called calcTotal which calculates the grand total of the donuts selected, based on the prices of each type of donut. If you've ever used calculations in a spreadsheet application like Excel, these types of calculations should make sense.

The beauty of AngularJS is that's all the JavaScript code I need for the calculator.

How the HTML works

One of the features AngularJS brings to HTML is data-binding, which means you can bind data to an visible HTML element so that when the data gets updates, what you see or view in the HTML also gets updated.

For example, in the calculator, when I select two plain donuts, the page shows $1.60 in the subtotal. When I select three plain donuts, the page shows $2.40 without needing to update the page or submit a form.

You can check out the source code yourself, but I've broken it down to the most important parts to explain.

{{ prices.plain | currency }}

All this does is display the value of prices.plain using AngularJS currency filter. Originally, I set the value to 0.8, but using the currency filter displays it as $0.80.

<input type="number" ng-model="plain" ng-change="calcTotal()" />

There's two things going on here in this input field where customers select the number of plain donuts they want:

• ng-model: This essentially tells AngularJS, "I want this field bound to the plain data model, so that when the field is updated, the plain value is also updated."
• ng-change: This tells AngularJS, "When someone changes the value of this field, I want you to run the calcTotal function, which will update the grand total on the screen."

There's a few more calculations happening in this form, but I think I've covered the most important parts. Let me know if you have questions about this form, or other ways you can use AngularJS to improve your business.

Aaron Tweeton is a web designer and developer who help people design, develop, maintain and improve their website so they can reach and serve more people. You can sign up for his weekly newsletter here.