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

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