AngularJS calculator application tutorial

Posted on May 25, 2013

AngularJS is fucking awesome and you will see a lot of AngularJS examples in this site.



A few days ago I was talking with Marcos about the benefits and he started playing with AngularJS writing a very simple calculator application. I really liked that example because, it’s simple and it shows the power of AngularJS. So I decided to complete a little bit the example and explain how it works for those that are looking to a simple application.

What is AngularJS?

AngularJS is a JavaScript framework designed to build single-page applications, created by Miško Hevery and Adam Abrons, two Google software engineers. As many others, AngularJS is an MVC framework and haves lots of cool development techniques like dependency-injection, two-way databinding and much more. AngularJS is currently maintained by Google.

With this calculator example you will see how databinding works in only 55 lines of JavaScript code!

See this AngularJS calculator

HTML Code:

One of the best things of AngularJS is that it works by architecture with templates. This is really useful in the development process when you have a JavaScript developer and a web HTML/CSS designer.

To initialize your AngularJS application you need to add the ng-app AngularJS directive. The directives are custom HTML attributes that AngularJS process to have special behaviours. With ng-app=”Calculator” we’re setting the AngularJS name. You will see later how to create the application in the JavaScript code.

Now we will set the name’s controller with the ng-controller directive. We will call it “CalculatorController” with ng-controller=”CalculatorController”. Inside the controller we will create all the view elements associated to the controller. So we will create an input text to type the values, a div to show the results and five buttons to clear, sum, subtract, multiply and divide.

All those view elements have a lot of interesting directives. We  have the listeners ng-click and ng-change that take care about the user input and dispatch to a function inside the controller. Also we have the ng-model, that creates a memory allocation associated to the controller. This model is a two-way data binding model by default and it works like a charm. Fucking awesome, really.

Finally we add our JavaScript dependencies and our JavaScript code.

JavaScript Code:

To create our AngularJS application we just need to call to angular.module(“Calculator”, []) at our main JavaScript file. Note that “Calculator” is the name that you have at the ng-app directive in the html tag of your html document.

Now we have set up our AngularJS application we will create the controller with the function controller(“CalculatorController”, function CalculatorController($scope){}). The controller’s name must be the same that you have been set at your html document with the ng-directive. Obviously, you can have as many controllers as you want.

Another cool feature of AngularJS is the dependency injection. So we could inject in our controller whatever we need to make it work. For example, we are injecting the scope to our CalculatorController passing through parameter the $scope provider, that is capable of access our view elements and the model associated to them. The $scope provider is one of the most important providers and you will use it a lot.

With the $scope provider you can create your methods defined in the views like $scope.onClickSum at ng-click or access to the model at $scope.result. You will notice that we are using parseFloat, that’s because AngularJS is using databinding to update the models and the views, and I don’t want to extend in this part, but basically it parses all to String in order to make it work. So remember to parse your data if you need to process it.

And that’s it, we have our calculator working. Just think how much will cost you to do this with jQuery or other framework and you will figure out how cool is AngularJS.

See the example running
Download Code

Happy fucking coding!!