#6 - Multiple Controllers in AngularJS

In this article we are using Multiple Controllers in AngularJS,  adding a new Controller containing new behavior ,  to the same AngularJS View, in order to initiate you on how to use AngularJS Controllers .
This is the Lesson #6 in the "AngularJS: From 0 To 100" series written for absolute Beginners, which  is the continuation of the basic Controllers' Lesson #4 and Lesson #5, so please take a look at them.
<<<< 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.

As we explained in the previous lesson, AngularJS Controllers are just constructors used to merge Business Logic with an Angular View , by means of :
1) initializing the $scope HTML5 elements 
2) setting the App behavior of AngularJS adding methods to the $scope

The Controller's AngularJS documentation can be found at the AngularJS official web site.
For this tutorial we'll continue building an AngularJS App developed in the previous tutorial, adding more behavior (functionality) to the App by using multiple  Controllers , in order to perform calculations and show the results at the AngularJS View.

This AngularJS App will appear this way :

Multiple Controllers in AngularJS

Let's go: open the AngularJS App that we developed in the   Lesson #5, and add to the HTML5 markup a div bound to a new Controller "AlbumsCtl" :

Type a readonly input text with an data-ng-model "selectedItem" which will output the selected item from the drop down list:

Next, create the dropdownlist with an ng-model "album" and all available music albums:

Run ("Live Preview") the App to see the View:

By the way, this is the CSS3 style, if you want to copy it:

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;}input[class*=output] {padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:190px;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;text-align:center;background:#fed;    border:10px solid #ddd;    border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}button,select {padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:220px;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;}

Next, open the javascript Controller file and append a new Controller named "AlbumsCtl":

Now, because we want to bind the selected item from the drop down list , to an input element, we must define a method , meaning a $scope behavior, that will be run every time it is needed. Therefore define an $scope function as follows:

Inside the method, just copy the selected value ($scope.album) to the selectedItem Property:

Finally, let's use the AngularJS ng-change directive , to call the Controller's method whenever the selected value at the list has changed :

The official documentation for the data-ng-change directive can be found at the AngularJS web site .
Run the App, and select a music album from the list:

You will see that the second Controller has updated the album's name at the text element:

So, we have now two different Controllers together at the same AngularJS View. Each one of them contains a completely separated $scope with different behavior and properties, and do not interfere which each other.

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

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

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

#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 >>>>

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