A day in the programmer's life

I have been developing with AngularJS lately and I am starting step by step tutorials in my blog.

Here is the first article from the series:

Hello AngularJS

AngularJS is a client-side JavaScript framework by Google. It helps you to write organized and testable code on the client side. AngularJS shines particularly in the so called single page applications (SPA). If you are curious why it is called AngularJS - it is because the expressions in AngularJS are surrounded by brackets - {{ expressionHere }}

All you need to start using AngularJS is to include the library .js file in your html page.

<html ng-app>
    <head>
        <title>AngularJS is cool</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
        </script>
    <head>
    <body>
        {{'Hello AngularJS'}}
        <br/>
        {{ 7 + 9 }}
    </body>
</html>

As you may have guessed this example prints Hello AngularJS and 16 in your page.

You learned three important things about AngularJS from this simple example:

You must include the AngularJS library through the script tag.
Expressions in AngularJS are surrounded by {{ }}
You must use the ng-app directive to bootstrap your application. A directive in AngularJS is a custom component - extension to the standard HTML. ng-app is a built-in directive in AngularJS. You can create your own custom components, i.e. directives. But this will be a topic of another tutorial.

Simple Calculator

Now let's create something more useful - a simple calculator. You enter two numbers and an operator and our program will calculate the result.

Your business logic in AngularJS is done in the so called controllers. You declare variables and methods in controllers. Controllers are created in separate js files which you include in the page. From the html view the controller is used with the help of the ng-controller built-in directive.

<html ng-app>
    <head>
        <title>AngularJS Calculator</title>
        
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
        </script>
        
        <script src="calc-controller.js"></script>
    <head>
    <body>
        <div ng-controller="Calculator">
            <label>A:</label>
            <input ng-model="firstNumber" type="text"> <br/>
            
            <label>Operator:</label>
            <select ng-model="selectedOperator" 
                    ng-options="operator for operator in operators"></select> <br/>
            
            <label>B:</label>
            <input ng-model="secondNumber" type="text"> <br/>
            
            <button ng-click="calculate()">Calculate</button> <br/>
            
            Result: {{result}}
        </div>
    </body>
</html>

Here is our controller declared in the calc-controller.js:

function Calculator($scope) {    
    $scope.operators = ['+', '-', '*', '/'];
    $scope.selectedOperator = $scope.operators[0];
    
    $scope.calculate = function() {
        var A = parseInt($scope.firstNumber);
        var B = parseInt($scope.secondNumber);
        var C = 0;
    
        switch ($scope.selectedOperator) {
            case '+':
                C = A + B;
                break;
            case '-':
                C = A - B;
                break;
            case '*':
                C = A * B;
                break;
            case '/':
                C = A / B;
                break;                
        }
        
        $scope.result = C;
    };
}

We specified the controller name using the ng-controller directive:
<div ng-controller="Calculator">

The controller name must match the name of the function - function Calculator($scope)

For each controller a local $scope is created. You can access the information in the page and also modify it through the $scope. You can also declare methods in the scope. All things you declare in the $scope are accessible only in the part of the html page where the ng-controller directive is specified.

Using the ng-model directive you bind the input information (the numbers and the operator) to the $scope. Then the controller can access the input information through the $scope parameter variable.

Using the ng-options directive we populate the select combobox with data from the controller.

Using the ng-click directive, the calculate() method in the controller is called, when the button is clicked:
<button ng-click="calculate()">Calculate</button>

Now look really carefully at this line in the controller:

$scope.result = C;

After it is executed, AngularJS will automatically update the {{result}} expression in the UI. This automatical bidirectional binding between the UI and the scope is really powerful and makes your life easier.

I hope this introductory article was useful to you. You learned that controllers and directives are a key part from AngularJS and created a simple calculator.

In the next article we will tackle the next important part - the AngularJS filters, which are used to format your data in the UI.