#5 - Using Controllers in AngularJS

In this article we are using Controllers in AngularJS,  and adding behavior to a Controller ,  to create an AngularJS App, and give you an idea on how to use AngularJS Controllers .
This Tutorial can be learned as a standalone. This is the Lesson #5 in the "AngularJS: From 0 To 100" series written for absolute Beginners. This lesson is the continuation of the basic Controllers' Lesson #4 , so please take a look at it, in case you need some learning background.
.
<<<< PREVIOUS LESSON                                                                    NEXT LESSON >>>>
We're using here a free Web Editor , "Brackets" , powerful and optimized for developing with AngularJS . You can learn a 5 minutes tutorial about it in this post.

AngularJS Controllers are just constructors used to merge Business Logic with an Angular View , by means of :
1) initializing the HTML5 elements : inside a defined $scope.
2) setting the behavior of AngularJS Properties and Expressions in that $scope

The Controller's AngularJS documentation can be found at the AngularJS official web site.
For this tutorial we'll continue to build an AngularJS App adding behavior (functionality) to the  Controller , in order to perform calculations and show the results through AngularJS Expressions.

This  AngularJS App that we are building in this Tutorial will look this way :

Using Controllers in AngularJS

We suppose here that you have already completed the previous Lesson #4. We'll continue developing the same Angular App, just check that you have the references that we added there:

As you remember from the former lesson #4, we have a list of music albums, and an automatic calculation of the total. However, this is an AngularJS View, that means , this HTML5 file should contain ONLY presentation code: this file is not the place for performing calculations or applying business rules. The Controller is the place for that, in this MVC architecture (Model View Controller). The Model keeps the data, the View is the presentation layer, and the Controller keeps the logic for the App:

Because of that, we'll add behavior to our Controller's $scope, which until now just initialize the $scope variables:

If you like, take a look at the official AngularJS documentation for the Controllers here.
As you remember from the previous lesson, this initialization code runs only once, at the onload event. However, now we'll add Controller's behavior that will run every time that it is requested.

In the View, replace the calculation with a new Property, named "total" (don't delete the "currency" Filter):

Initialize the "total" variable at the Controller:

Now add an anonymous function to the Controller, which will be held in an "fnCalculateTotal" $scope variable:

If you want to copy-paste the code, here you have the Controller's javascript:

var oMusicApp = angular.module('MusicApp', []);
oMusicApp.controller('MusicCtl', [ '$scope', function ($scope) {            $scope.quantity = 0;            $scope.price = 12.50;              $scope.total = 0;                 $scope.fnCalculateTotal = function(){                                              $scope.total = $scope.quantity * $scope.price;                                             }                                  }     ]);

Inside the function, insert the calculation that we previously had inside the View:

That's all for the Controller. Now let's call the new $scope behavior from the View, by creating a button which calls the function using the data-ng-click AngularJS directive:

This is the HTML5 markup to copy-paste:

<div id="controls" data-ng-controller="MusicCtl">                <h3>Quantity of Fragile State Albums to purchase :</h3>                <input type="number" data-ng-model="quantity" />                <input type="text"   data-ng-model='price | currency:"USD$ "' />                <div style="text-align:center">            <button data-ng-click="fnCalculateTotal()">Calculate Total</button>        </div>                <pre><i>Total Price :</i><br></pre>        <div id="results" >            <pre>                <b><i>                <label>{{ total | currency:"USD$  " }}</label>                </i></b>            </pre>         </div>    </div>

The View will be displayed as follows:

Select the number of albums, and click the button to see the total:

If you liked the CSS3, here you have it to copy:

input, button, div[id$=results]{padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:99%text-align: center;background:#fea; font:900 12px Comic Sans MS;opacity:0.9;border:10px solid #ddd;    border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;} div[id$=controls]  {padding:5px 5px 5px 25px;margin:10px 15px 15px 25px;width:99%text-align:center;background:#fed;    border:10px solid #ddd;    border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}button{padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:180px;text-align: center;background:#ddd; font:900 14px Comic Sans MS;opacity:0.9;border:1px solid #c0c0c0;    border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}

That's All!!! You have begun using Controllers in AngularJS .  In the next article we will continue to learn Step by Step about using Multiple Controllers in AngularJS  . 
Happy programming.....
      by Carmel Schvartzman

<<<< PREVIOUS LESSON                                                                    NEXT LESSON >>>>

כתב: כרמל שוורצמן